var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, openBlock, createElementBlock, createElementVNode, inject, nextTick, watch, createBlock, Teleport, withDirectives, toDisplayString, createCommentVNode, renderSlot, vShow, ref, vModelText, normalizeClass, unref, createVNode, withCtx, Fragment, renderList, reactive, computed, normalizeStyle, mergeProps, shallowRef, onMounted, isRef, defineAsyncComponent, onBeforeUnmount, resolveDynamicComponent, createTextVNode, vModelSelect, vModelCheckbox, normalizeProps, withModifiers, getCurrentScope, onScopeDispose, provide } from "vue";
import "https://at.alicdn.com/t/font_3035765_zp71fb8psi.js";
var tailwind = "";
var animate = "";
function useConnection() {
  let connecitonData = {};
  function isUnExcept(exceptId, id) {
    if (Array.isArray(exceptId)) {
      return exceptId.indexOf(id) === -1;
    } else {
      return exceptId !== id;
    }
  }
  function getNextExceptId(exceptId, id) {
    if (Array.isArray(exceptId)) {
      exceptId.push(id);
      return exceptId;
    }
    return id;
  }
  const connection = {
    getData() {
      return connecitonData;
    },
    getConnect(id) {
      return connecitonData[id];
    },
    clear() {
      connecitonData = {};
    },
    isConnect(id) {
      const conn = connecitonData[id];
      return conn && conn.length > 0;
    },
    connect(id, drag) {
      let conn = connecitonData[id];
      if (!conn) {
        conn = connecitonData[id] = [];
      }
      conn.push(drag);
    },
    disConnect(id, targetId) {
      const conn = connecitonData[id];
      if (conn) {
        conn.forEach((drag, i) => {
          if (targetId) {
            if (targetId === drag.id) {
              conn.splice(i, 1);
              return false;
            }
          } else {
            connection.disConnect(drag.id, id);
          }
        });
      }
      if (targetId && conn.length === 0 || !targetId) {
        delete connecitonData[id];
      }
    },
    startTogether(id, exceptId) {
      const conn = connecitonData[id];
      if (!conn)
        return;
      conn.forEach((drag) => {
        if (isUnExcept(exceptId, drag.id)) {
          connection.startTogether(drag.id, getNextExceptId(exceptId, id));
          if (drag.start) {
            drag.startData = drag.start();
          }
        }
      });
    },
    moveTogether(id, options, exceptId) {
      const conn = connecitonData[id];
      if (!conn)
        return;
      conn.forEach((drag) => {
        if (isUnExcept(exceptId, drag.id)) {
          if (options.connectPoints && drag.extra && drag.extra.connectPositionIndex !== void 0) {
            const target = options.connectPoints[drag.extra.connectPositionIndex];
            options.x = target.x;
            options.y = target.y;
          } else {
            options.startData = drag.startData;
          }
          drag.move(options);
          connection.moveTogether(drag.id, options, getNextExceptId(exceptId, id));
        }
      });
    },
    endTogether(id, exceptId) {
      const conn = connecitonData[id];
      if (!conn)
        return;
      conn.forEach((drag) => {
        if (isUnExcept(exceptId, drag.id)) {
          drag.end && drag.end();
          connection.endTogether(drag.id, getNextExceptId(exceptId, id));
        }
      });
    }
  };
  return connection;
}
var Icon_vue_vue_type_style_index_0_lang = "";
const _hoisted_1$o = { class: "vc-inline-block" };
const _hoisted_2$l = {
  class: "icon vc-inline-block",
  "aria-hidden": "true"
};
const _hoisted_3$g = ["xlink:href"];
const _sfc_main$v = /* @__PURE__ */ defineComponent({
  props: {
    name: {
      required: true,
      type: String
    }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("span", _hoisted_1$o, [
        (openBlock(), createElementBlock("svg", _hoisted_2$l, [
          createElementVNode("use", {
            "xlink:href": "#icon-" + __props.name
          }, null, 8, _hoisted_3$g)
        ]))
      ]);
    };
  }
});
const SvgWidth = 3e3;
const SvgHeight = 3e3;
const GridShares = 20;
const TextFontSzie = 14;
const ValueColor = "#172B4D";
const UnitColor = "#7B879A";
const LabelColor = "#7B879A";
const OperSize = 10;
const FlowPathOperSize = 12;
const IconSize = 16;
const FlowPathLegendSize = {
  width: 32,
  height: 32
};
function getApplyCondition(conditionData, data) {
  const applyCondition = [];
  conditionData.forEach((condition) => {
    const value = data[condition.dataKey];
    if (value !== void 0) {
      if (condition.min !== null && value < condition.min || condition.max !== null && value > condition.max) {
        return;
      }
      applyCondition.push(condition);
    }
  });
  return applyCondition;
}
const scaleFactor$3 = 1;
const connectIds$3 = {
  DeviceSvg_328635972111648866201904: [
    {
      id: "_460254775101648866200318",
      position: 0
    },
    {
      id: "_582224619201648866270365",
      position: 2
    }
  ],
  DeviceSvg_764986739121648866209032: [
    {
      id: "_669889597131648866212934",
      position: 1
    },
    {
      id: "_645397460171648866260549",
      position: 0
    }
  ]
};
const compData$3 = [
  {
    id: "DeviceSvg_328635972111648866201904",
    x: 73.5,
    y: 460.75,
    width: 93,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "CoolingTower"
  },
  {
    id: "DeviceSvg_764986739121648866209032",
    x: 278.5,
    y: 161.75,
    width: 93,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "CoolingTower"
  },
  {
    id: "PipePath_90938177981648866200318",
    points: [
      {
        x: 287.8,
        y: 255.305,
        _x: 287.8,
        _y: 255.305,
        isAddSubPath: false,
        id: "_669889597131648866212934"
      },
      {
        x: 113,
        y: 253.5,
        _x: 113,
        _y: 253.5,
        id: "_47361620291648866200318",
        isAddSubPath: false
      },
      {
        x: 120,
        y: 460.75,
        _x: 120,
        _y: 460.75,
        id: "_460254775101648866200318"
      }
    ],
    textData: [],
    colors: [
      "#333333"
    ],
    isFloating: false,
    isReverse: false,
    style: {
      innerColor: "#333333",
      innerSize: 2,
      outerSize: 14,
      outerOpacity: 30,
      dottedSize: 4,
      dottedMargin: 6
    },
    type: "pipe",
    conditionData: [],
    speed: 1
  },
  {
    id: "PipePath_666275591141648866257352",
    points: [
      {
        x: 325,
        y: 161.75,
        _x: 325,
        _y: 161.75,
        isAddSubPath: false,
        id: "_645397460171648866260549"
      },
      {
        x: 320,
        y: 92.5,
        _x: 320,
        _y: 92.5,
        id: "_498299180151648866257352",
        isAddSubPath: false
      },
      {
        x: 680,
        y: 79.5,
        _x: 680,
        _y: 79.5,
        id: "_590813906161648866257352",
        isAddSubPath: false
      },
      {
        x: 665,
        y: 675.5,
        _x: 665,
        _y: 675.5,
        isAddSubPath: false,
        id: "_684826804181648866263837"
      },
      {
        x: 132,
        y: 673.5,
        _x: 132,
        _y: 673.5,
        isAddSubPath: false,
        id: "_140366692191648866267476"
      },
      {
        x: 120,
        y: 554.305,
        _x: 120,
        _y: 554.305,
        isAddSubPath: false,
        id: "_582224619201648866270365"
      }
    ],
    textData: [],
    colors: [
      "#333333"
    ],
    isFloating: false,
    isReverse: false,
    style: {
      innerColor: "#333333",
      innerSize: 2,
      outerSize: 14,
      outerOpacity: 30,
      dottedSize: 4,
      dottedMargin: 6
    },
    type: "pipe",
    conditionData: [
      {
        id: "condition_65815558981649404591839",
        dataKey: "key2",
        min: 100,
        max: 300,
        isReverse: false,
        isFloating: true,
        pipePathStyle: {
          innerColor: "#e41111",
          innerSize: 2,
          outerSize: 14,
          outerOpacity: 30,
          dottedSize: 4,
          dottedMargin: 6
        },
        speed: 1
      },
      {
        id: "condition_96182150191649404617759",
        dataKey: "key2",
        min: 300,
        max: 500,
        isReverse: false,
        isFloating: true,
        pipePathStyle: {
          innerColor: "#e41111",
          innerSize: 2,
          outerSize: 14,
          outerOpacity: 30,
          dottedSize: 4,
          dottedMargin: 6
        },
        speed: 2
      },
      {
        id: "condition_903325167101649404628975",
        dataKey: "key2",
        min: 500,
        max: 800,
        isReverse: false,
        isFloating: true,
        pipePathStyle: {
          innerColor: "#e41111",
          innerSize: 2,
          outerSize: 14,
          outerOpacity: 30,
          dottedSize: 4,
          dottedMargin: 6
        },
        speed: 3
      }
    ],
    speed: 1
  },
  {
    id: "LabelValue_42455635441648866099324",
    position: "vertical",
    labelText: "\u6570\u636E\u70B92",
    valueText: "value",
    rotate: 0,
    dataKey: "key2",
    labelX: 179,
    labelY: 200,
    labelCssProps: {
      "font-size": "14px"
    },
    valueCssProps: {
      "font-size": "14px",
      color: "#3333FF"
    },
    hideValue: false,
    conditionData: [
      {
        id: "condition_86425024981648885845901",
        dataKey: "key2",
        min: 100,
        max: 300,
        labelCssProps: {
          color: "#a44141",
          "font-family": "Times New Roman",
          "text-decoration": "underline",
          "font-weight": "bold",
          "font-size": "16px"
        },
        valueCssProps: {}
      }
    ]
  },
  {
    id: "LabelValue_16615516051648866117230",
    position: "vertical",
    labelText: "\u6570\u636E\u70B91",
    valueText: "value",
    rotate: 0,
    dataKey: "key1",
    labelX: 48,
    labelY: 369,
    labelCssProps: {
      "font-size": "14px"
    },
    valueCssProps: {
      "font-size": "14px",
      color: "#3333FF"
    },
    hideValue: false,
    conditionData: [
      {
        id: "condition_14524490791648885852220",
        dataKey: "key1",
        min: 100,
        max: 400,
        labelCssProps: {
          color: "#e33535",
          "font-family": "inhert",
          "font-size": "16px",
          "text-decoration": "underline",
          "font-weight": "bold"
        },
        valueCssProps: {}
      }
    ]
  },
  {
    id: "LabelValue_518853568211648866283709",
    position: "vertical",
    labelText: "\u6570\u636E\u70B93",
    valueText: "value",
    rotate: 0,
    dataKey: "key3",
    labelX: 495,
    labelY: 120,
    labelCssProps: {
      "font-size": "14px"
    },
    valueCssProps: {
      "font-size": "14px",
      color: "#3333FF"
    },
    hideValue: false,
    conditionData: [
      {
        id: "condition_839342139101648885918700",
        dataKey: "key3",
        min: 500,
        max: 800,
        labelCssProps: {
          color: "#409f2d",
          "font-family": "inhert",
          "font-weight": "bold",
          "font-size": "16px"
        },
        valueCssProps: {
          color: "#d7143b",
          "font-family": "inhert",
          "font-weight": "bold",
          "font-size": "20px"
        }
      }
    ]
  },
  {
    id: "LabelValue_127145909221648866285690",
    position: "vertical",
    labelText: "\u6570\u636E\u70B94",
    valueText: "value",
    rotate: 0,
    dataKey: "key4",
    labelX: 704,
    labelY: 327,
    labelCssProps: {
      "font-size": "14px"
    },
    valueCssProps: {
      "font-size": "14px",
      color: "#3333FF"
    },
    hideValue: false,
    conditionData: [
      {
        id: "condition_481869088131648885984348",
        dataKey: "key4",
        min: null,
        max: 400,
        labelCssProps: {},
        valueCssProps: {
          color: "#28b125",
          "font-family": "inhert",
          "font-size": "25px",
          "font-weight": "bold",
          "font-style": "italic",
          "background-color": "#f2f2f2",
          "border-color": "#c03535",
          "border-width": "1px",
          "border-style": "solid"
        }
      }
    ]
  },
  {
    id: "LabelValue_429620359231648866287163",
    position: "vertical",
    labelText: "\u6570\u636E\u70B95",
    valueText: "value",
    rotate: 0,
    dataKey: "key5",
    labelX: 364,
    labelY: 613,
    labelCssProps: {
      "font-size": "14px"
    },
    valueCssProps: {
      "font-size": "14px",
      color: "#3333FF"
    },
    hideValue: false,
    conditionData: [
      {
        id: "condition_403572913141648886023508",
        dataKey: "key2",
        min: 500,
        max: null,
        labelCssProps: {
          color: "#f90101",
          "font-family": "Comic Sans MS",
          "font-weight": "bold",
          "font-size": "25px"
        },
        valueCssProps: {}
      }
    ]
  }
];
var example1 = {
  scaleFactor: scaleFactor$3,
  connectIds: connectIds$3,
  compData: compData$3
};
const scaleFactor$2 = 1;
const connectIds$2 = {
  FlowPath_66096276641653901486224: [
    {
      id: "_59679005691653901494538",
      position: 3
    }
  ],
  FlowPath_22711717051653901489409: [
    {
      id: "_26774501881653901494538",
      position: 1
    }
  ]
};
const compData$2 = [
  {
    id: "DeviceSvg_30939088561653901493672",
    x: 285.5,
    y: 236.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "PipePath_4316002071653901494537",
    points: [
      {
        x: 151,
        y: 542,
        _x: 151,
        _y: 542,
        id: "_26774501881653901494538"
      },
      {
        x: 142,
        y: 297,
        _x: 142,
        _y: 297,
        id: "_59679005691653901494538"
      }
    ],
    textData: [],
    colors: [
      "#333333"
    ],
    isFloating: false,
    isReverse: false,
    style: {
      innerColor: "#333333",
      innerSize: 2,
      outerSize: 14,
      outerOpacity: 30,
      dottedSize: 4,
      dottedMargin: 6
    },
    type: "pipe",
    conditionData: [],
    speed: 1
  },
  {
    id: "FlowPath_66096276641653901486224",
    x: 78,
    y: 265,
    width: 64,
    height: 64,
    type: "Diamond",
    rotate: 0,
    text: "q3ewe"
  },
  {
    id: "FlowPath_22711717051653901489409",
    x: 119,
    y: 542,
    width: 64,
    height: 64,
    type: "Diamond",
    rotate: 0,
    text: "wqewe"
  }
];
var example2 = {
  scaleFactor: scaleFactor$2,
  connectIds: connectIds$2,
  compData: compData$2
};
const scaleFactor$1 = 1;
const connectIds$1 = {};
const compData$1 = [
  {
    id: "DeviceSvg_344398041581655112523169",
    x: 307.5,
    y: 211.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_378109845591655112527079",
    x: 429.5,
    y: 458.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_286453776601655112528119",
    x: 515.5,
    y: 327.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_651644773611655112529207",
    x: 152.5,
    y: 625.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_961685907621655112530199",
    x: 645.5,
    y: 604.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_850643937631655112533599",
    x: 812.5,
    y: 924.75,
    width: 93,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "CoolingTower"
  },
  {
    id: "DeviceSvg_392659103641655112536280",
    x: 289.5,
    y: 921.75,
    width: 93,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "CoolingTower"
  },
  {
    id: "DeviceSvg_877825824651655112543087",
    x: 1286.5,
    y: 490.75,
    width: 93,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "CoolingTower"
  },
  {
    id: "DeviceSvg_379032637661655112554519",
    x: 1068.5,
    y: 1013.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_842646281671655112558712",
    x: 1274.5,
    y: 675.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_167920185681655112567334",
    x: 1013.5,
    y: 554.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_938879615691655112568174",
    x: 1098.5,
    y: 353.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_242737757701655112569126",
    x: 1288.5,
    y: 211.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_392552216711655112570167",
    x: 838.5,
    y: 469.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_404668479721655112570910",
    x: 772.5,
    y: 213.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_349027079731655112571790",
    x: 960.5,
    y: 141.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_329890420741655112573294",
    x: 1429.5,
    y: 346.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_844357351751655112574350",
    x: 1397.5,
    y: 486.25,
    width: 147,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_600064645761655112577894",
    x: 1092.5,
    y: 839.75,
    width: 93,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "CoolingTower"
  },
  {
    id: "PipePath_11041742311655112450796",
    points: [
      {
        x: 167,
        y: 78.5,
        _x: 167,
        _y: 78.5,
        id: "_136255720321655112450797",
        bindTextIds: [
          "_748113664341655112451538"
        ]
      },
      {
        x: 620,
        y: 130.5,
        _x: 620,
        _y: 130.5,
        id: "_843767996331655112450797",
        bindTextIds: [
          "_748113664341655112451538"
        ],
        overlapId: "_764622517361655112452960"
      },
      {
        x: 805,
        y: 466.5,
        _x: 805,
        _y: 466.5,
        id: "_681796134381655112454672",
        isReverse: true,
        isParentNode: true,
        overlapId: "_635035574401655112456488"
      },
      {
        x: 710,
        y: 289.5,
        _x: 710,
        _y: 289.5,
        id: "_926158611351655112452960",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 620,
        y: 130.5,
        _x: 620,
        _y: 130.5,
        isParentNode: false,
        overlapId: "_764622517361655112452960",
        id: "_937176198371655112452960",
        isReverse: true
      },
      {
        x: 805,
        y: 466.5,
        _x: 805,
        _y: 466.5,
        isParentNode: true,
        overlapId: "_635035574401655112456488",
        id: "_743793777411655112456488"
      },
      {
        x: 1369,
        y: 48.5,
        _x: 1369,
        _y: 48.5,
        id: "_451314711391655112456488"
      },
      {
        x: 2825,
        y: 117.5,
        _x: 2825,
        _y: 117.5,
        id: "_864662022421655112461032"
      },
      {
        x: 2859,
        y: 629.5,
        _x: 2859,
        _y: 629.5,
        id: "_144470009431655112469368"
      },
      {
        x: 2727,
        y: 812.5,
        _x: 2727,
        _y: 812.5,
        id: "_748234066441655112471264"
      },
      {
        x: 2454,
        y: 1260.5,
        _x: 2454,
        _y: 1260.5,
        id: "_441022267451655112474000"
      },
      {
        x: 2433,
        y: 751.5,
        _x: 2433,
        _y: 751.5,
        id: "_127525918461655112476936"
      },
      {
        x: 2248,
        y: 944.5,
        _x: 2248,
        _y: 944.5,
        id: "_306622638471655112479275"
      },
      {
        x: 2174,
        y: 1143.5,
        _x: 2174,
        _y: 1143.5,
        id: "_132980859481655112482248"
      },
      {
        x: 1478,
        y: 886.5,
        _x: 1478,
        _y: 886.5,
        id: "_340910581491655112488296"
      },
      {
        x: 862,
        y: 752.5,
        _x: 862,
        _y: 752.5,
        id: "_132657090501655112492576"
      },
      {
        x: 710,
        y: 804.5,
        _x: 710,
        _y: 804.5,
        id: "_359452625511655112495936"
      },
      {
        x: 195,
        y: 455.5,
        _x: 195,
        _y: 455.5,
        id: "_915000986521655112499446"
      },
      {
        x: 178,
        y: 213.5,
        _x: 178,
        _y: 213.5,
        id: "_214875776541655112510173"
      },
      {
        x: 70,
        y: 710.5,
        _x: 70,
        _y: 710.5,
        id: "_610216357551655112512278"
      },
      {
        x: 489,
        y: 780.5,
        _x: 489,
        _y: 780.5,
        id: "_47307211561655112514205"
      },
      {
        x: 718,
        y: 989.5,
        _x: 718,
        _y: 989.5,
        id: "_493559471571655112517470"
      }
    ],
    textData: [
      {
        id: "_748113664341655112451538",
        startIndex: 0,
        endIndex: 1,
        value: "",
        width: 0,
        height: 0,
        position: "top",
        editable: false,
        initValue: ""
      }
    ],
    colors: [
      "#ffffff",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#B9C0CC",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  }
];
var example3 = {
  scaleFactor: scaleFactor$1,
  connectIds: connectIds$1,
  compData: compData$1
};
const scaleFactor = 1;
const connectIds = {
  DeviceSvg_132118491161654755790099: [
    {
      id: "_21056485181654755792443",
      position: 0
    },
    {
      id: "_29581082821654760695696",
      position: 1
    },
    {
      id: "_409239077741654763324744",
      position: 3
    },
    {
      id: "_7443514221201654844480012",
      position: 2
    }
  ],
  DeviceSvg_363524640211654755810811: [
    {
      id: "_875467887201654755797818",
      position: 1
    }
  ],
  DeviceSvg_222405845231654755853460: [
    {
      id: "_66715559221654755818354",
      position: 1
    }
  ],
  DeviceSvg_473713869261654755987733: [
    {
      id: "_890263722271654755997029",
      position: 1
    }
  ],
  DeviceSvg_49644766451654755532731: [
    {
      id: "_355069081301654756137765",
      position: 1
    }
  ],
  DeviceSvg_2235988941654755519355: [
    {
      id: "_589647358351654756864910",
      position: 4
    },
    {
      id: "_298159999601654845882899",
      position: 5
    },
    {
      id: "_250784870651654919304953",
      position: 2
    }
  ],
  DeviceSvg_80541373371654755538916: [
    {
      id: "_4018213371654756890614",
      position: 1
    }
  ],
  DeviceSvg_65551982761654755536836: [
    {
      id: "_926733291381654756897110",
      position: 4
    },
    {
      id: "_803981986421654756961952",
      position: 2
    },
    {
      id: "_764078538651654845932131",
      position: 5
    }
  ],
  DeviceSvg_914786460391654756944232: [
    {
      id: "_846601559431654756961952",
      position: 1
    }
  ],
  DeviceSvg_540925450121654757514466: [
    {
      id: "_970179024161654757539803",
      position: 0
    },
    {
      id: "_772887433621654760288370",
      position: 1
    }
  ],
  DeviceSvg_137802229141654757534898: [
    {
      id: "_819666682181654757546440",
      position: 0
    }
  ],
  DeviceSvg_742605075221654757667426: [
    {
      id: "_965499590211654757627169",
      position: 0
    }
  ],
  DeviceSvg_157681411311654757987705: [
    {
      id: "_125439616301654757984479",
      position: 0
    }
  ],
  DeviceSvg_21369768591654755721353: [
    {
      id: "_218389302321654757995431",
      position: 1
    },
    {
      id: "_338803678691654762257535",
      position: 3
    },
    {
      id: "_510192907851654843928653",
      position: 2
    },
    {
      id: "_415231241561654919194836",
      position: 0
    }
  ],
  DeviceSvg_262195441351654758912352: [
    {
      id: "_35268554371654759833532",
      position: 3
    }
  ],
  DeviceSvg_831644976341654758908574: [
    {
      id: "_659246444381654759833532",
      position: 0
    },
    {
      id: "_741392010401654759840755",
      position: 1
    }
  ],
  DeviceSvg_993125777421654759843373: [
    {
      id: "_579348419411654759840755",
      position: 0
    }
  ],
  DeviceSvg_21485857431654759850133: [
    {
      id: "_463555197451654759873554",
      position: 0
    }
  ],
  DeviceSvg_876741900471654759953203: [
    {
      id: "_535155935461654759947537",
      position: 0
    }
  ],
  DeviceSvg_189818661481654759965203: [
    {
      id: "_529346745491654759968577",
      position: 0
    }
  ],
  DeviceSvg_314493573331654758895950: [
    {
      id: "_525097631501654759979825",
      position: 1
    },
    {
      id: "_804892419541654760095659",
      position: 0
    },
    {
      id: "_888335679671654763129704",
      position: 3
    },
    {
      id: "_3922419351121654844409196",
      position: 2
    }
  ],
  DeviceSvg_262825043511654760091443: [
    {
      id: "_587649384561654760101939",
      position: 1
    }
  ],
  DeviceSvg_956982158521654760093066: [
    {
      id: "_416458245571654760104721",
      position: 0
    }
  ],
  DeviceSvg_367393392611654760273299: [
    {
      id: "_159382608581654757156669",
      position: 0
    }
  ],
  DeviceSvg_106467671654760558416: [
    {
      id: "_276853187661654760352203",
      position: 1
    },
    {
      id: "_325915288711654760580186",
      position: 0
    }
  ],
  DeviceSvg_746161290691654760571048: [
    {
      id: "_365190410731654760585064",
      position: 1
    }
  ],
  DeviceSvg_398416351771654760617249: [
    {
      id: "_139801814761654760596551",
      position: 0
    }
  ],
  DeviceSvg_964743008791654760676216: [
    {
      id: "_497535136781654760620320",
      position: 0
    }
  ],
  DeviceSvg_697935689811654760690032: [
    {
      id: "_674971359801654760687455",
      position: 0
    }
  ],
  DeviceSvg_332182757591654760186810: [
    {
      id: "_963922194671654764071986",
      position: 3
    },
    {
      id: "_3879917321041654844100157",
      position: 1
    },
    {
      id: "_88235097701654845985176",
      position: 2
    }
  ],
  DeviceSvg_183340271601654760189195: [
    {
      id: "_827474153631654764000218",
      position: 3
    },
    {
      id: "_966802594961654844059685",
      position: 1
    },
    {
      id: "_741828356741654846001600",
      position: 2
    }
  ],
  DeviceSvg_829636820641654762235625: [
    {
      id: "_963468276631654762232327",
      position: 0
    }
  ],
  DeviceSvg_601595996671654762251114: [
    {
      id: "_946756003681654762252391",
      position: 0
    }
  ],
  DeviceSvg_965479863651654762243520: [
    {
      id: "_454221891611654762211864",
      position: 0
    }
  ],
  DeviceSvg_202057503621654762226656: [
    {
      id: "_667929914321654762675296",
      position: 0
    }
  ],
  DeviceSvg_286155477481654763056176: [
    {
      id: "_806581504631654763110426",
      position: 1
    }
  ],
  DeviceSvg_35662673441654763018992: [
    {
      id: "_512229261621654763110426",
      position: 0
    },
    {
      id: "_39551136991654765200357",
      position: 1
    }
  ],
  DeviceSvg_671152214491654763060809: [
    {
      id: "_38479717641654763118152",
      position: 1
    }
  ],
  DeviceSvg_218282726471654763054248: [
    {
      id: "_397170948651654763121600",
      position: 1
    }
  ],
  DeviceSvg_371764781461654763052328: [
    {
      id: "_298597676661654763126394",
      position: 1
    }
  ],
  DeviceSvg_88832948551654763086368: [
    {
      id: "_227382675701654763284489",
      position: 1
    }
  ],
  DeviceSvg_962456763531654763081616: [
    {
      id: "_330221002721654763308064",
      position: 1
    }
  ],
  DeviceSvg_154009967541654763084393: [
    {
      id: "_895996175711654763303320",
      position: 1
    }
  ],
  DeviceSvg_931427473521654763079913: [
    {
      id: "_58589547731654763321752",
      position: 1
    }
  ],
  DeviceSvg_264661817421654763618682: [
    {
      id: "_731709583451654763636477",
      position: 3
    },
    {
      id: "_318798915611654767302811",
      position: 1
    },
    {
      id: "_192683000811654846029394",
      position: 0
    }
  ],
  DeviceSvg_627880014431654763626538: [
    {
      id: "_454862361461654763636477",
      position: 0
    }
  ],
  DeviceSvg_111303995491654763653634: [
    {
      id: "_724556564481654763646873",
      position: 0
    }
  ],
  DeviceSvg_237141740561654761834801: [
    {
      id: "_517874559611654763993210",
      position: 1
    }
  ],
  DeviceSvg_113635908511654761803792: [
    {
      id: "_103331804621654763996404",
      position: 0
    }
  ],
  DeviceSvg_97391314291654761419597: [
    {
      id: "_862243060651654764060522",
      position: 1
    }
  ],
  DeviceSvg_519779703281654761418216: [
    {
      id: "_269058974661654764064074",
      position: 0
    }
  ],
  DeviceSvg_651881490521654763701115: [
    {
      id: "_39637077631654767817815",
      position: 1
    },
    {
      id: "_767490951791654842044033",
      position: 3
    }
  ],
  DeviceSvg_236944111431654762942369: [
    {
      id: "_337962508331654762686423",
      position: 0
    },
    {
      id: "_728106743961654765191299",
      position: 1
    }
  ],
  DeviceSvg_1038274521071654765257493: [
    {
      id: "_3635901461061654765230868",
      position: 0
    }
  ],
  DeviceSvg_4842208271121654765298133: [
    {
      id: "_2260103771111654765291867",
      position: 0
    }
  ],
  DeviceSvg_6780383501141654765303566: [
    {
      id: "_2244114251131654765302019",
      position: 0
    }
  ],
  DeviceSvg_663179158561654767264358: [
    {
      id: "_977995252481654767156651",
      position: 1
    }
  ],
  DeviceSvg_487904503471654767051733: [
    {
      id: "_437017356571654767271468",
      position: 1
    }
  ],
  DeviceSvg_457787214591654767292965: [
    {
      id: "_23803005601654767296980",
      position: 1
    }
  ],
  DeviceSvg_131828588581654767775201: [
    {
      id: "_13954805571654767772144",
      position: 1
    }
  ],
  DeviceSvg_434136816461654767525781: [
    {
      id: "_646704379591654767780774",
      position: 1
    }
  ],
  DeviceSvg_949859966621654767811769: [
    {
      id: "_118807522611654767795831",
      position: 1
    }
  ],
  DeviceSvg_9433592681201654765387485: [
    {
      id: "_979673884641654770606491",
      position: 1
    },
    {
      id: "_341327964861654842395796",
      position: 0
    }
  ],
  DeviceSvg_7826237701191654765385669: [
    {
      id: "_187057962901654842401035",
      position: 0
    },
    {
      id: "_584834871761654844957568",
      position: 1
    }
  ],
  DeviceSvg_1365387451181654765383142: [
    {
      id: "_23132789941654842406522",
      position: 0
    },
    {
      id: "_25143327811654845006232",
      position: 1
    }
  ],
  DeviceSvg_9298428871171654765378877: [
    {
      id: "_4853992281141654768781077",
      position: 1
    },
    {
      id: "_45115522981654842413981",
      position: 0
    }
  ],
  DeviceSvg_8056346471161654765371046: [
    {
      id: "_7546248341021654842424450",
      position: 0
    },
    {
      id: "_564851097851654845130713",
      position: 1
    }
  ],
  DeviceSvg_1507662691131654768776048: [
    {
      id: "_9262759471031654768453151",
      position: 1
    }
  ],
  DeviceSvg_8677020141171654768833079: [
    {
      id: "_5366065981091654768484100",
      position: 0
    }
  ],
  DeviceSvg_100601071181654768840487: [
    {
      id: "_2102355851191654768844901",
      position: 0
    }
  ],
  DeviceSvg_828510362621654770605073: [
    {
      id: "_137301926651654770606491",
      position: 0
    },
    {
      id: "_298071364671654770613506",
      position: 1
    }
  ],
  DeviceSvg_415375208781654770665544: [
    {
      id: "_349485066691654770630376",
      position: 0
    }
  ],
  DeviceSvg_128225186811654770678985: [
    {
      id: "_48784210801654770674119",
      position: 0
    }
  ],
  DeviceSvg_8660706861151654771957700: [
    {
      id: "_1981685111131654771945538",
      position: 0
    }
  ],
  DeviceSvg_5777439831141654771952204: [
    {
      id: "_6852969981161654771962971",
      position: 0
    }
  ],
  DeviceSvg_9625706091171654771988372: [
    {
      id: "_8852329471091654771938123",
      position: 0
    }
  ],
  DeviceSvg_2143278331191654771998101: [
    {
      id: "_3762725451051654771930043",
      position: 0
    }
  ],
  DeviceSvg_1022661461211654772005494: [
    {
      id: "_9258856411181654771993187",
      position: 0
    }
  ],
  DeviceSvg_7167350191221654772008900: [
    {
      id: "_6899942661201654772003547",
      position: 0
    }
  ],
  DeviceSvg_141467371271654772249058: [
    {
      id: "_6626877301361654772371095",
      position: 1
    }
  ],
  DeviceSvg_8139607211371654772398706: [
    {
      id: "_8310955371381654772401015",
      position: 1
    }
  ],
  DeviceSvg_6743354321411654772427825: [
    {
      id: "_1276022051401654772417751",
      position: 1
    }
  ],
  DeviceSvg_6266865681431654772440913: [
    {
      id: "_9729352541421654772431496",
      position: 1
    }
  ],
  DeviceSvg_3963574941451654772445674: [
    {
      id: "_3870842721441654772443999",
      position: 1
    }
  ],
  DeviceSvg_8629028131231654772184371: [
    {
      id: "_5280496481461654772450575",
      position: 1
    },
    {
      id: "_4068371252281654773693616",
      position: 3
    }
  ],
  DeviceSvg_7062791121561654772618889: [
    {
      id: "_955987741511654772598175",
      position: 1
    }
  ],
  DeviceSvg_990984721551654772614568: [
    {
      id: "_7825779191571654772627551",
      position: 1
    },
    {
      id: "_7966383351581654772630961",
      position: 0
    }
  ],
  DeviceSvg_797794721531654772605888: [
    {
      id: "_2821959811651654772747766",
      position: 1
    }
  ],
  DeviceSvg_7069507131521654772604200: [
    {
      id: "_3438913821661654772751638",
      position: 1
    }
  ],
  DeviceSvg_1875071001541654772611114: [
    {
      id: "_1275624611631654772712702",
      position: 1
    }
  ],
  DeviceSvg_838487731241654772185986: [
    {
      id: "_8743664991671654772757030",
      position: 1
    },
    {
      id: "_634678570531654845302561",
      position: 3
    }
  ],
  DeviceSvg_2554560081731654772806808: [
    {
      id: "_7590443351721654772801494",
      position: 1
    }
  ],
  DeviceSvg_90545201761654772830137: [
    {
      id: "_5684065901741654772813838",
      position: 1
    }
  ],
  DeviceSvg_1205347061811654772870016: [
    {
      id: "_4958995771781654772844054",
      position: 1
    }
  ],
  DeviceSvg_2783410581801654772866775: [
    {
      id: "_9267580151821654772873822",
      position: 1
    }
  ],
  DeviceSvg_1934907561791654772863983: [
    {
      id: "_4720953151831654772877606",
      position: 1
    }
  ],
  DeviceSvg_2948798551251654772188867: [
    {
      id: "_5975692331841654772883974",
      position: 1
    },
    {
      id: "_49823267721654845384737",
      position: 3
    }
  ],
  DeviceSvg_807861031851654772910143: [
    {
      id: "_3050207001911654772931824",
      position: 1
    }
  ],
  DeviceSvg_5876469731861654772915232: [
    {
      id: "_3924164631921654772935775",
      position: 1
    }
  ],
  DeviceSvg_1729743101871654772919712: [
    {
      id: "_1078502591941654772941095",
      position: 1
    }
  ],
  DeviceSvg_9172020331881654772922496: [
    {
      id: "_2871654971951654772949494",
      position: 1
    }
  ],
  DeviceSvg_5639996931891654772924383: [
    {
      id: "_8912642851961654772953550",
      position: 1
    }
  ],
  DeviceSvg_1493499831261654772191946: [
    {
      id: "_4633450331971654772956406",
      position: 1
    },
    {
      id: "_507227473711654845371201",
      position: 3
    }
  ],
  DeviceSvg_6725383042261654773672638: [
    {
      id: "_1766442992301654773698476",
      position: 0
    }
  ],
  DeviceSvg_58012462321654773722525: [
    {
      id: "_3083473362311654773717332",
      position: 0
    }
  ],
  DeviceSvg_9179370352051654773271192: [
    {
      id: "_9612415092571654774028067",
      position: 1
    }
  ],
  DeviceSvg_631006377821654764681132: [
    {
      id: "_25647065781654842038041",
      position: 0
    }
  ],
  DeviceSvg_4531814211211654765390757: [
    {
      id: "_306136876741654843734039",
      position: 0
    },
    {
      id: "_202121017691654844918192",
      position: 1
    }
  ],
  DeviceSvg_334852377391654762800913: [
    {
      id: "_416140378831654843921759",
      position: 0
    }
  ],
  DeviceSvg_564065992371654762795177: [
    {
      id: "_649297050841654843925389",
      position: 0
    }
  ],
  DeviceSvg_888066197491654761750553: [
    {
      id: "_822833796941654844046710",
      position: 0
    }
  ],
  DeviceSvg_398303625441654761728375: [
    {
      id: "_862918800951654844055837",
      position: 0
    }
  ],
  DeviceSvg_350475646411654761568344: [
    {
      id: "_3370470571021654844075781",
      position: 0
    }
  ],
  DeviceSvg_643595304391654761540735: [
    {
      id: "_7209260831031654844097477",
      position: 0
    }
  ],
  DeviceSvg_598347984511654763075625: [
    {
      id: "_7974535021101654844390012",
      position: 0
    }
  ],
  DeviceSvg_514626190501654763065672: [
    {
      id: "_4933489171111654844405893",
      position: 0
    }
  ],
  DeviceSvg_876063313571654763092905: [
    {
      id: "_7574252441181654844464060",
      position: 0
    }
  ],
  DeviceSvg_254218511561654763089208: [
    {
      id: "_2054198191191654844477046",
      position: 0
    }
  ],
  DeviceSvg_324218678451654763020697: [
    {
      id: "_433607814691654763284489",
      position: 0
    },
    {
      id: "_7530225651031654765214387",
      position: 1
    }
  ],
  DeviceSvg_1749477881271654844577367: [
    {
      id: "_9727858471261654844572700",
      position: 0
    },
    {
      id: "_3993340051321654844629661",
      position: 0
    }
  ],
  DeviceSvg_361902552641654767964842: [
    {
      id: "_683851034601654844807759",
      position: 0
    }
  ],
  DeviceSvg_18507637651654767968755: [
    {
      id: "_149864285621654844811663",
      position: 0
    }
  ],
  DeviceSvg_299096336681654767989106: [
    {
      id: "_255229391631654844814432",
      position: 0
    }
  ],
  DeviceSvg_464615532581654770522809: [
    {
      id: "_950896779681654844915330",
      position: 0
    }
  ],
  DeviceSvg_495469605731654770642489: [
    {
      id: "_848005508751654844953856",
      position: 0
    }
  ],
  DeviceSvg_5215659731111654768508455: [
    {
      id: "_812440648801654845001104",
      position: 0
    }
  ],
  DeviceSvg_2547068721151654768800358: [
    {
      id: "_31494587841654845126561",
      position: 0
    }
  ],
  DeviceSvg_9577798002381654773856661: [
    {
      id: "_964624869481654845292017",
      position: 0
    }
  ],
  DeviceSvg_5822752722371654773854831: [
    {
      id: "_481340428511654845296971",
      position: 0
    }
  ],
  DeviceSvg_1773318182441654773919077: [
    {
      id: "_130704388541654845326913",
      position: 0
    }
  ],
  DeviceSvg_1386792172421654773906951: [
    {
      id: "_191235581571654845329921",
      position: 0
    }
  ],
  DeviceSvg_2887447192511654773967613: [
    {
      id: "_936240165661654845355097",
      position: 0
    }
  ],
  DeviceSvg_1813716592501654773965142: [
    {
      id: "_648491754691654845365297",
      position: 0
    }
  ],
  DeviceSvg_321046476421654845610081: [
    {
      id: "_432445544461654845624042",
      position: 0
    }
  ],
  DeviceSvg_800172269431654845613855: [
    {
      id: "_396236947501654845742267",
      position: 3
    },
    {
      id: "_482497002521654845796014",
      position: 0
    }
  ],
  DeviceSvg_311440268831654846144003: [
    {
      id: "_546707876851654846189984",
      position: 0
    },
    {
      id: "_464441635871654846198899",
      position: 3
    }
  ],
  DeviceSvg_39505551441654845618840: [
    {
      id: "_526197771531654845796014",
      position: 1
    },
    {
      id: "_765636871551654845804472",
      position: 0
    }
  ],
  DeviceSvg_402883563281654757917890: [
    {
      id: "_45472365511654919165306",
      position: 0
    }
  ],
  DeviceSvg_449355558101654755733858: [
    {
      id: "_978839391541654919187466",
      position: 0
    }
  ],
  DeviceSvg_88410090461654757034007: [
    {
      id: "_501729208641654919300410",
      position: 0
    }
  ],
  DeviceSvg_384537997571654919276795: [
    {
      id: "_426895904581654919284249",
      position: 0
    }
  ],
  DeviceSvg_984825608401654756950504: [
    {
      id: "_738646046661654919347448",
      position: 0
    }
  ]
};
const compData = [
  {
    id: "DeviceSvg_2235988941654755519355",
    x: 101.5,
    y: 75.9,
    width: 93,
    rotate: 0,
    text: "\u8D85\u4F4E\u566A\u97F3\u5F00\u5F0F\u65B9\u5F62\u51B7\u5374\u5854",
    textPosition: "bottom",
    componentName: "CoolingTower"
  },
  {
    id: "DeviceSvg_49644766451654755532731",
    x: 257.5,
    y: 108.75,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_65551982761654755536836",
    x: 483.5,
    y: 86.94,
    width: 93,
    rotate: 0,
    text: "\u8D85\u4F4E\u566A\u97F3\u5F00\u5F0F\u65B9\u5F62\u51B7\u5374\u5854",
    textPosition: "bottom",
    componentName: "CoolingTower"
  },
  {
    id: "DeviceSvg_80541373371654755538916",
    x: 646.5,
    y: 119.78999999999999,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_21369768591654755721353",
    x: 605.5,
    y: 811.6734693877551,
    width: 141.8985507246377,
    rotate: 0,
    text: "\u78C1\u60AC\u6D6E\u6C34\u51B7\u51B7\u6C34\u673A\u7EC4",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_449355558101654755733858",
    x: 509.25,
    y: 744.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_132118491161654755790099",
    x: 599.5,
    y: 1296.8,
    width: 147,
    rotate: 0,
    text: "\u78C1\u60AC\u6D6E\u6C34\u51B7\u51B7\u6C34\u673A\u7EC4",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_363524640211654755810811",
    x: 503.25,
    y: 1209.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_222405845231654755853460",
    x: 422.25,
    y: 1209.3461538461538,
    width: 20,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_473713869261654755987733",
    x: 365.04,
    y: 552,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_914786460391654756944232",
    x: 529.85,
    y: 215,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_984825608401654756950504",
    x: 522.65,
    y: 256.75,
    width: 21,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_88410090461654757034007",
    x: 147.85,
    y: 219,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_540925450121654757514466",
    x: 147,
    y: 860.75,
    width: 108,
    rotate: 0,
    text: "\u51B7\u5374\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "CoolingWaterPump"
  },
  {
    id: "DeviceSvg_137802229141654757534898",
    x: 219.25,
    y: 718.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_742605075221654757667426",
    x: 410.25,
    y: 870,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_402883563281654757917890",
    x: 410.41,
    y: 745.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_157681411311654757987705",
    x: 524.25,
    y: 870,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_314493573331654758895950",
    x: 610.5,
    y: 1043.3500000000001,
    width: 147,
    rotate: 0,
    text: "\u9AD8\u6E29\u7EA7\u70ED\u5F0F\u51B7\u70ED\u6C34\u673A\u7EC4\n",
    textPosition: "bottom",
    componentName: "RefrigerationUnit"
  },
  {
    id: "DeviceSvg_831644976341654758908574",
    x: 186.5,
    y: 1049.1,
    width: 111,
    rotate: 0,
    text: "\u70ED\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "HeatingHotWaterPump"
  },
  {
    id: "DeviceSvg_262195441351654758912352",
    x: 69.25,
    y: 1055.25,
    width: 79.5,
    rotate: 0,
    text: "\u5236\u51B7\u673A\u623F\u751F\u6D3B\u6C34\u7BB1",
    textPosition: "bottom",
    componentName: "ClosedWaterTank"
  },
  {
    id: "DeviceSvg_993125777421654759843373",
    x: 277.25,
    y: 1035.915,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_21485857431654759850133",
    x: 318.03,
    y: 1111.75,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_876741900471654759953203",
    x: 404.25,
    y: 1104.5500000000002,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_189818661481654759965203",
    x: 546.25,
    y: 1104.5500000000002,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_262825043511654760091443",
    x: 533.25,
    y: 968.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_956982158521654760093066",
    x: 449.25,
    y: 968.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_332182757591654760186810",
    x: 475.3716216216216,
    y: 423.65,
    width: 79.25675675675676,
    rotate: 0,
    text: "\u84C4\u51B7\u7F50",
    textPosition: "bottom",
    componentName: "ColdStorageTank"
  },
  {
    id: "DeviceSvg_183340271601654760189195",
    x: 751.25,
    y: 422,
    width: 76.5,
    rotate: 0,
    text: "\u84C4\u51B7\u7F50",
    textPosition: "bottom",
    componentName: "ColdStorageTank"
  },
  {
    id: "DeviceSvg_367393392611654760273299",
    x: 52.700000000000045,
    y: 566,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_106467671654760558416",
    x: 128,
    y: 1316.75,
    width: 108,
    rotate: 0,
    text: "\u51B7\u5374\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "CoolingWaterPump"
  },
  {
    id: "DeviceSvg_746161290691654760571048",
    x: 188.25,
    y: 1245.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_398416351771654760617249",
    x: 331.5,
    y: 1365.1999999999998,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_964743008791654760676216",
    x: 409.25,
    y: 1358,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_697935689811654760690032",
    x: 532.25,
    y: 1358,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_519779703281654761418216",
    x: 603.25,
    y: 459.54999999999995,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_97391314291654761419597",
    x: 673,
    y: 466.75,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_643595304391654761540735",
    x: 514.85,
    y: 590,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_350475646411654761568344",
    x: 507.65,
    y: 655.75,
    width: 21,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_398303625441654761728375",
    x: 789.35,
    y: 585,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_888066197491654761750553",
    x: 782.15,
    y: 656.75,
    width: 21,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_113635908511654761803792",
    x: 874.25,
    y: 455.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_237141740561654761834801",
    x: 949.5,
    y: 463.1,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_202057503621654762226656",
    x: 1021.25,
    y: 870.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_829636820641654762235625",
    x: 875.25,
    y: 870.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_965479863651654762243520",
    x: 960.5,
    y: 878.1,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_601595996671654762251114",
    x: 802.25,
    y: 870.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_564065992371654762795177",
    x: 852.25,
    y: 845.9238775510204,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_334852377391654762800913",
    x: 944.25,
    y: 845.9238775510204,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_236944111431654762942369",
    x: 1113,
    y: 848.5,
    width: 108,
    rotate: 0,
    text: "\u84C4\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "ChilledWaterPump"
  },
  {
    id: "DeviceSvg_35662673441654763018992",
    x: 1097,
    y: 1084.5,
    width: 108,
    rotate: 0,
    text: "\u84C4\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "ChilledWaterPump"
  },
  {
    id: "DeviceSvg_324218678451654763020697",
    x: 1103,
    y: 1334.5,
    width: 108,
    rotate: 0,
    text: "\u84C4\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "ChilledWaterPump"
  },
  {
    id: "DeviceSvg_371764781461654763052328",
    x: 812.25,
    y: 1106.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_218282726471654763054248",
    x: 887.25,
    y: 1106.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_286155477481654763056176",
    x: 1027.25,
    y: 1106.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_671152214491654763060809",
    x: 948.5,
    y: 1114.1,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_514626190501654763065672",
    x: 843.25,
    y: 1077.6400000000003,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_598347984511654763075625",
    x: 976.25,
    y: 1077.6400000000003,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_931427473521654763079913",
    x: 813.25,
    y: 1356.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_962456763531654763081616",
    x: 875.25,
    y: 1356.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_154009967541654763084393",
    x: 970.5,
    y: 1364.1,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_88832948551654763086368",
    x: 1037.25,
    y: 1356.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_254218511561654763089208",
    x: 847.25,
    y: 1331.0900000000001,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_876063313571654763092905",
    x: 975.25,
    y: 1331.0900000000001,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_264661817421654763618682",
    x: 1000.5,
    y: 89.5,
    width: 129,
    rotate: 0,
    text: "\u53D8\u9891\u87BA\u6746\u5F0F\u84B8\u53D1\u51B7\u673A\u7EC4\n",
    textPosition: "bottom",
    componentName: "EvaporativeCooling"
  },
  {
    id: "DeviceSvg_627880014431654763626538",
    x: 1270.25,
    y: 117.4,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_111303995491654763653634",
    x: 1354.8799999999999,
    y: 236,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_651881490521654763701115",
    x: 1378.5,
    y: 91.5,
    width: 129,
    rotate: 0,
    text: "\u78C1\u60AC\u6D6E\u84B8\u53D1\u51B7\u673A\u7EC4",
    textPosition: "bottom",
    componentName: "EvaporativeCooling"
  },
  {
    id: "DeviceSvg_631006377821654764681132",
    x: 1613.25,
    y: 119.4,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_1038274521071654765257493",
    x: 1522.5,
    y: 1542.1999999999998,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_4842208271121654765298133",
    x: 1588.25,
    y: 1535,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_6780383501141654765303566",
    x: 1732.25,
    y: 1535,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_8056346471161654765371046",
    x: 1552,
    y: 1407.6,
    width: 108,
    rotate: 0,
    text: "\u653E\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "DrainWaterPump"
  },
  {
    id: "DeviceSvg_9298428871171654765378877",
    x: 1550,
    y: 1259.6,
    width: 108,
    rotate: 0,
    text: "\u653E\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "DrainWaterPump"
  },
  {
    id: "DeviceSvg_1365387451181654765383142",
    x: 1551,
    y: 1123.6,
    width: 108,
    rotate: 0,
    text: "\u653E\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "DrainWaterPump"
  },
  {
    id: "DeviceSvg_7826237701191654765385669",
    x: 1541,
    y: 1001.5999999999999,
    width: 108,
    rotate: 0,
    text: "\u653E\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "DrainWaterPump"
  },
  {
    id: "DeviceSvg_9433592681201654765387485",
    x: 1532,
    y: 850.6,
    width: 108,
    rotate: 0,
    text: "\u653E\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "DrainWaterPump"
  },
  {
    id: "DeviceSvg_4531814211211654765390757",
    x: 1531,
    y: 668.6,
    width: 108,
    rotate: 0,
    text: "\u653E\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "DrainWaterPump"
  },
  {
    id: "DeviceSvg_487904503471654767051733",
    x: 1125,
    y: 229.5,
    width: 48,
    rotate: 0,
    text: "\u84C4\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "ColdStoragePump"
  },
  {
    id: "DeviceSvg_663179158561654767264358",
    x: 1221.25,
    y: 269.4,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_457787214591654767292965",
    x: 1060.85,
    y: 228,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_434136816461654767525781",
    x: 1487,
    y: 239,
    width: 48,
    rotate: 0,
    text: "\u84C4\u51B7\u6C34\u6CF5",
    textPosition: "bottom",
    componentName: "ColdStoragePump"
  },
  {
    id: "DeviceSvg_131828588581654767775201",
    x: 1558.25,
    y: 278.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_949859966621654767811769",
    x: 1438.85,
    y: 219,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_361902552641654767964842",
    x: 1487.25,
    y: 600.55,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_18507637651654767968755",
    x: 1595.25,
    y: 600.55,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_299096336681654767989106",
    x: 1677.5,
    y: 607.75,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_5215659731111654768508455",
    x: 1713.25,
    y: 1149,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_1507662691131654768776048",
    x: 1715.25,
    y: 1287,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_2547068721151654768800358",
    x: 1722.75,
    y: 1432.4461538461537,
    width: 20,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_8677020141171654768833079",
    x: 1856.25,
    y: 1287,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_100601071181654768840487",
    x: 1923.5,
    y: 1294.1999999999998,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_464615532581654770522809",
    x: 1684.25,
    y: 692,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_828510362621654770605073",
    x: 1686.25,
    y: 874.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_495469605731654770642489",
    x: 1689.25,
    y: 1025,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_415375208781654770665544",
    x: 1826.25,
    y: 874.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_128225186811654770678985",
    x: 1883.5,
    y: 882.1,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_5777439831141654771952204",
    x: 2281.25,
    y: 977.8499999999999,
    width: 79.5,
    rotate: 0,
    text: "\u529E\u516C\u697C\u70ED\u6C34\u7BB1",
    textPosition: "bottom",
    componentName: "ClosedWaterTank"
  },
  {
    id: "DeviceSvg_8660706861151654771957700",
    x: 2138.5,
    y: 1003.1999999999998,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_9625706091171654771988372",
    x: 2135.5,
    y: 1199.1999999999998,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_2143278331191654771998101",
    x: 2140.5,
    y: 1421.1999999999998,
    width: 21,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_1022661461211654772005494",
    x: 2283.25,
    y: 1173.85,
    width: 79.5,
    rotate: 0,
    text: "\u7EFC\u5408\u697C\u5317\u533A\u70ED\u6C34\u7BB1",
    textPosition: "bottom",
    componentName: "ClosedWaterTank"
  },
  {
    id: "DeviceSvg_7167350191221654772008900",
    x: 2286.25,
    y: 1395.85,
    width: 79.5,
    rotate: 0,
    text: "\u7EFC\u5408\u697C\u5357\u533A\u70ED\u6C34\u7BB1",
    textPosition: "bottom",
    componentName: "ClosedWaterTank"
  },
  {
    id: "DeviceSvg_8629028131231654772184371",
    x: 1907.44,
    y: 125.5,
    width: 109.5,
    rotate: 0,
    text: "\u98CE\u51B7\u70ED\u6CF5\u673A\u7EC4",
    textPosition: "bottom",
    componentName: "AirCooledHeatPump"
  },
  {
    id: "DeviceSvg_838487731241654772185986",
    x: 2137.1,
    y: 123.5,
    width: 109.5,
    rotate: 0,
    text: "\u98CE\u51B7\u70ED\u6CF5\u673A\u7EC4",
    textPosition: "bottom",
    componentName: "AirCooledHeatPump"
  },
  {
    id: "DeviceSvg_2948798551251654772188867",
    x: 2359.44,
    y: 111.5,
    width: 109.5,
    rotate: 0,
    text: "\u98CE\u51B7\u70ED\u6CF5\u673A\u7EC4",
    textPosition: "bottom",
    componentName: "AirCooledHeatPump"
  },
  {
    id: "DeviceSvg_1493499831261654772191946",
    x: 2578.44,
    y: 113.5,
    width: 109.5,
    rotate: 0,
    text: "\u98CE\u51B7\u70ED\u6CF5\u673A\u7EC4",
    textPosition: "bottom",
    componentName: "AirCooledHeatPump"
  },
  {
    id: "DeviceSvg_141467371271654772249058",
    x: 2032,
    y: 429,
    width: 48,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "ColdStoragePump"
  },
  {
    id: "DeviceSvg_8139607211371654772398706",
    x: 1990.25,
    y: 468.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_6743354321411654772427825",
    x: 1962.8400000000001,
    y: 380.75,
    width: 21,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_6266865681431654772440913",
    x: 1970.04,
    y: 342,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_3963574941451654772445674",
    x: 1970.04,
    y: 294,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_7069507131521654772604200",
    x: 2191.7,
    y: 272,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_797794721531654772605888",
    x: 2191.7,
    y: 346,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_1875071001541654772611114",
    x: 2184.5,
    y: 394.75,
    width: 21,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_990984721551654772614568",
    x: 2229.75,
    y: 469.34615384615387,
    width: 20,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_7062791121561654772618889",
    x: 2273,
    y: 430,
    width: 48,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "ColdStoragePump"
  },
  {
    id: "DeviceSvg_2554560081731654772806808",
    x: 2485,
    y: 430,
    width: 48,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "ColdStoragePump"
  },
  {
    id: "DeviceSvg_90545201761654772830137",
    x: 2443.25,
    y: 469.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_1934907561791654772863983",
    x: 2414.04,
    y: 290,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_2783410581801654772866775",
    x: 2414.04,
    y: 346,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_1205347061811654772870016",
    x: 2406.84,
    y: 404.75,
    width: 21,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_807861031851654772910143",
    x: 2691,
    y: 438,
    width: 48,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "ColdStoragePump"
  },
  {
    id: "DeviceSvg_5876469731861654772915232",
    x: 2654.25,
    y: 477.9,
    width: 19.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_1729743101871654772919712",
    x: 2625.84,
    y: 410.75,
    width: 21,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_9172020331881654772922496",
    x: 2633.04,
    y: 334,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_5639996931891654772924383",
    x: 2633.04,
    y: 267,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_9179370352051654773271192",
    x: 1865.5,
    y: 577.75,
    width: 20,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_6725383042261654773672638",
    x: 2097.85,
    y: 254,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_58012462321654773722525",
    x: 2097.85,
    y: 318,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_5822752722371654773854831",
    x: 2321.85,
    y: 269,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_9577798002381654773856661",
    x: 2321.85,
    y: 359,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_1386792172421654773906951",
    x: 2536.85,
    y: 278,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_1773318182441654773919077",
    x: 2536.85,
    y: 369,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_1813716592501654773965142",
    x: 2779.85,
    y: 246,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_2887447192511654773967613",
    x: 2779.85,
    y: 364,
    width: 19.5,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Meter"
  },
  {
    id: "DeviceSvg_1749477881271654844577367",
    x: 1293.5,
    y: 1604.3857142857141,
    width: 20,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "DeviceSvg_321046476421654845610081",
    x: 348.75,
    y: 1552.5,
    width: 64.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "WaterSoftener"
  },
  {
    id: "DeviceSvg_800172269431654845613855",
    x: 221.25,
    y: 1559.25,
    width: 79.5,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "ClosedWaterTank"
  },
  {
    id: "DeviceSvg_39505551441654845618840",
    x: 89.5,
    y: 1552.5,
    width: 87,
    rotate: 0,
    text: "",
    textPosition: "bottom",
    componentName: "PressWaterSupply"
  },
  {
    id: "DeviceSvg_311440268831654846144003",
    x: 1770.25,
    y: 134.25,
    width: 79.5,
    rotate: 0,
    text: "\u81A8\u80C0\u6C34\u7BB1",
    textPosition: "bottom",
    componentName: "ClosedWaterTank"
  },
  {
    id: "DeviceSvg_384537997571654919276795",
    x: 140.64999999999998,
    y: 260.75,
    width: 21,
    rotate: 90,
    text: "",
    textPosition: "bottom",
    componentName: "Valve"
  },
  {
    id: "PipePath_738992541171654755792443",
    points: [
      {
        x: 648.01,
        y: 1307.1499999999999,
        _x: 648.01,
        _y: 1307.1499999999999,
        id: "_21056485181654755792443"
      },
      {
        x: 648.01,
        y: 1231.5,
        _x: 648.01,
        _y: 1231.5,
        id: "_34384690191654755792443"
      },
      {
        x: 521.19,
        y: 1231.5,
        _x: 521.19,
        _y: 1231.5,
        id: "_875467887201654755797818"
      },
      {
        x: 440.65,
        y: 1231.5,
        _x: 440.65,
        _y: 1231.5,
        id: "_66715559221654755818354"
      },
      {
        x: 365.19,
        y: 1231.5,
        _x: 365.19,
        _y: 1231.5,
        id: "_450243157241654755861682"
      },
      {
        x: 365.19,
        y: 766.5,
        _x: 365.19,
        _y: 766.5,
        id: "_974822246251654755875501",
        overlapId: "_410779444521654919165306"
      },
      {
        x: 365.19,
        y: 564,
        _x: 365.19,
        _y: 564,
        id: "_890263722271654755997029",
        bindTextIds: [
          "_922530934311654756155179"
        ]
      },
      {
        x: 365.19,
        y: 333.19,
        _x: 365.19,
        _y: 333.19,
        id: "_850761206281654756007661",
        bindTextIds: [
          "_922530934311654756155179"
        ],
        overlapId: "_982603416331654756806678"
      },
      {
        x: 365.19,
        y: 123.15,
        _x: 365.19,
        _y: 123.15,
        id: "_837036600291654756132222"
      },
      {
        x: 278.5,
        y: 123.15,
        _x: 278.5,
        _y: 123.15,
        id: "_355069081301654756137765"
      },
      {
        x: 194.5,
        y: 123.15,
        _x: 194.5,
        _y: 123.15,
        id: "_589647358351654756864910"
      },
      {
        x: 365.19,
        y: 333.19,
        _x: 365.19,
        _y: 333.19,
        isParentNode: true,
        overlapId: "_982603416331654756806678",
        id: "_882565847341654756806678"
      },
      {
        x: 731.4,
        y: 333.19,
        _x: 731.4,
        _y: 333.19,
        id: "_965297371321654756806678"
      },
      {
        x: 731.4,
        y: 134.19,
        _x: 731.4,
        _y: 134.19,
        id: "_628278832361654756875934"
      },
      {
        x: 667.5,
        y: 134.19,
        _x: 667.5,
        _y: 134.19,
        id: "_4018213371654756890614"
      },
      {
        x: 576.5,
        y: 134.19,
        _x: 576.5,
        _y: 134.19,
        id: "_926733291381654756897110"
      },
      {
        x: 652.3265217391304,
        y: 821.6642857142857,
        _x: 652.3265217391304,
        _y: 821.6642857142857,
        id: "_415231241561654919194836",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 650,
        y: 766.5,
        _x: 650,
        _y: 766.5,
        id: "_554089437551654919192354",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 519,
        y: 766.5,
        _x: 519,
        _y: 766.5,
        id: "_978839391541654919187466",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 420.16,
        y: 767.5,
        _x: 420.16,
        _y: 767.5,
        id: "_45472365511654919165306",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 365.19,
        y: 766.5,
        _x: 365.19,
        _y: 766.5,
        isParentNode: false,
        overlapId: "_410779444521654919165306",
        id: "_378219367531654919165306",
        isReverse: true
      }
    ],
    textData: [
      {
        id: "_922530934311654756155179",
        startIndex: 6,
        endIndex: 7,
        value: "",
        width: 0,
        height: 0,
        position: "top",
        editable: false,
        initValue: ""
      }
    ],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#fd8358",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_531331851411654756961951",
    points: [
      {
        x: 530,
        y: 180.495,
        _x: 530,
        _y: 180.495,
        id: "_803981986421654756961952"
      },
      {
        x: 530,
        y: 227,
        _x: 530,
        _y: 227,
        id: "_846601559431654756961952"
      },
      {
        x: 530,
        y: 268,
        _x: 530,
        _y: 268,
        id: "_738646046661654919347448"
      },
      {
        x: 530,
        y: 307,
        _x: 530,
        _y: 307,
        id: "_128779913441654756984693"
      },
      {
        x: 148,
        y: 307,
        _x: 148,
        _y: 307,
        id: "_683132211451654757003925",
        overlapId: "_714593616591654919284249"
      },
      {
        x: 52.85000000000002,
        y: 307,
        _x: 52.85000000000002,
        _y: 307,
        id: "_619011189571654757153133"
      },
      {
        x: 52.85000000000002,
        y: 578,
        _x: 52.85000000000002,
        _y: 578,
        id: "_159382608581654757156669"
      },
      {
        x: 52.85000000000002,
        y: 906.65,
        _x: 52.85000000000002,
        _y: 906.65,
        id: "_284330708131654757519481",
        overlapId: "_910304679641654760313283"
      },
      {
        x: 147,
        y: 906.65,
        _x: 147,
        _y: 906.65,
        id: "_772887433621654760288370"
      },
      {
        x: 52.85000000000002,
        y: 906.65,
        _x: 52.85000000000002,
        _y: 906.65,
        isParentNode: true,
        overlapId: "_910304679641654760313283",
        id: "_352694574651654760313283"
      },
      {
        x: 52.85000000000002,
        y: 1362.65,
        _x: 52.85000000000002,
        _y: 1362.65,
        id: "_195443828631654760313283"
      },
      {
        x: 128,
        y: 1362.65,
        _x: 128,
        _y: 1362.65,
        id: "_276853187661654760352203"
      },
      {
        x: 148,
        y: 169.45499999999998,
        _x: 148,
        _y: 169.45499999999998,
        id: "_250784870651654919304953",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 148,
        y: 231,
        _x: 148,
        _y: 231,
        id: "_501729208641654919300410",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 148,
        y: 272,
        _x: 148,
        _y: 272,
        id: "_426895904581654919284249",
        isParentNode: false,
        isReverse: true,
        overlapId: "_58519264621654919294505"
      },
      {
        x: 148,
        y: 307,
        _x: 148,
        _y: 307,
        isParentNode: false,
        overlapId: "_714593616591654919284249",
        id: "_855725765601654919284249",
        isReverse: true
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#f5b83c",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_362643267151654757539803",
    points: [
      {
        x: 168.60000000000002,
        y: 860.75,
        _x: 168.60000000000002,
        _y: 860.75,
        id: "_970179024161654757539803"
      },
      {
        x: 167.60000000000002,
        y: 740.5,
        _x: 167.60000000000002,
        _y: 740.5,
        id: "_342189782171654757539803"
      },
      {
        x: 220.03,
        y: 740.5,
        _x: 220.03,
        _y: 740.5,
        id: "_819666682181654757546440"
      },
      {
        x: 296.03,
        y: 740.5,
        _x: 296.03,
        _y: 740.5,
        id: "_788024820191654757567624"
      },
      {
        x: 296.03,
        y: 891.6,
        _x: 296.03,
        _y: 891.6,
        id: "_662257515201654757571602"
      },
      {
        x: 411.03,
        y: 891.6,
        _x: 411.03,
        _y: 891.6,
        id: "_965499590211654757627169"
      },
      {
        x: 493.66999999999996,
        y: 891.6,
        _x: 493.66999999999996,
        _y: 891.6,
        id: "_723278276231654757672416"
      },
      {
        x: 525.03,
        y: 891.6,
        _x: 525.03,
        _y: 891.6,
        id: "_125439616301654757984479"
      },
      {
        x: 621.1088405797101,
        y: 891.6,
        _x: 621.1088405797101,
        _y: 891.6,
        id: "_218389302321654757995431"
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#f5b83c",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_369746182361654759833531",
    points: [
      {
        x: 148.75,
        y: 1095,
        _x: 148.75,
        _y: 1095,
        id: "_35268554371654759833532"
      },
      {
        x: 186.5,
        y: 1095,
        _x: 186.5,
        _y: 1095,
        id: "_659246444381654759833532"
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#f5b83c",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_878919154391654759840755",
    points: [
      {
        x: 266.42,
        y: 1057.5149999999999,
        _x: 266.42,
        _y: 1057.5149999999999,
        id: "_741392010401654759840755"
      },
      {
        x: 278.03,
        y: 1057.5149999999999,
        _x: 278.03,
        _y: 1057.5149999999999,
        id: "_579348419411654759840755"
      },
      {
        x: 318.03,
        y: 1057.5149999999999,
        _x: 318.03,
        _y: 1057.5149999999999,
        id: "_646508499441654759865378"
      },
      {
        x: 318.03,
        y: 1126.15,
        _x: 318.03,
        _y: 1126.15,
        id: "_463555197451654759873554"
      },
      {
        x: 405.03,
        y: 1126.15,
        _x: 405.03,
        _y: 1126.15,
        id: "_535155935461654759947537"
      },
      {
        x: 547.03,
        y: 1126.15,
        _x: 547.03,
        _y: 1126.15,
        id: "_529346745491654759968577"
      },
      {
        x: 626.67,
        y: 1126.15,
        _x: 626.67,
        _y: 1126.15,
        id: "_525097631501654759979825"
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#f5b83c",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_768392854531654760095658",
    points: [
      {
        x: 659.01,
        y: 1053.7,
        _x: 659.01,
        _y: 1053.7,
        id: "_804892419541654760095659"
      },
      {
        x: 659.01,
        y: 990.5,
        _x: 659.01,
        _y: 990.5,
        id: "_45701146551654760095659"
      },
      {
        x: 551.19,
        y: 990.5,
        _x: 551.19,
        _y: 990.5,
        id: "_587649384561654760101939"
      },
      {
        x: 450.03,
        y: 990.5,
        _x: 450.03,
        _y: 990.5,
        id: "_416458245571654760104721"
      },
      {
        x: 450.03,
        y: 1669.6,
        _x: 450.03,
        _y: 1669.6,
        id: "_817907712581654760109913"
      },
      {
        x: 2073.19,
        y: 1669.6,
        _x: 2073.19,
        _y: 1669.6,
        id: "_2055062401031654771856027"
      },
      {
        x: 2073.19,
        y: 1435.6,
        _x: 2073.19,
        _y: 1435.6,
        id: "_7125774161041654771923242",
        overlapId: "_8919796781071654771933098"
      },
      {
        x: 2140.5,
        y: 1435.6,
        _x: 2140.5,
        _y: 1435.6,
        id: "_3762725451051654771930043"
      },
      {
        x: 2286.25,
        y: 1435.6,
        _x: 2286.25,
        _y: 1435.6,
        id: "_6899942661201654772003547"
      },
      {
        x: 2073.19,
        y: 1435.6,
        _x: 2073.19,
        _y: 1435.6,
        isParentNode: true,
        overlapId: "_8919796781071654771933098",
        id: "_1615753861081654771933098"
      },
      {
        x: 2073.19,
        y: 1213.6,
        _x: 2073.19,
        _y: 1213.6,
        id: "_3506601521061654771933098",
        overlapId: "_6694740881111654771940492"
      },
      {
        x: 2135.5,
        y: 1213.6,
        _x: 2135.5,
        _y: 1213.6,
        id: "_8852329471091654771938123"
      },
      {
        x: 2283.25,
        y: 1213.6,
        _x: 2283.25,
        _y: 1213.6,
        id: "_9258856411181654771993187"
      },
      {
        x: 2073.19,
        y: 1213.6,
        _x: 2073.19,
        _y: 1213.6,
        isParentNode: true,
        overlapId: "_6694740881111654771940492",
        id: "_4236492211121654771940492"
      },
      {
        x: 2073.19,
        y: 1017.5999999999999,
        _x: 2073.19,
        _y: 1017.5999999999999,
        id: "_9701041221101654771940492"
      },
      {
        x: 2138.5,
        y: 1017.5999999999999,
        _x: 2138.5,
        _y: 1017.5999999999999,
        id: "_1981685111131654771945538"
      },
      {
        x: 2281.25,
        y: 1017.5999999999999,
        _x: 2281.25,
        _y: 1017.5999999999999,
        id: "_6852969981161654771962971"
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#fcfcfc",
      innerSize: 2,
      outerColor: "#fd8358",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_457061756701654760580185",
    points: [
      {
        x: 149.6,
        y: 1316.75,
        _x: 149.6,
        _y: 1316.75,
        id: "_325915288711654760580186"
      },
      {
        x: 148.6,
        y: 1267.5,
        _x: 148.6,
        _y: 1267.5,
        id: "_241979611721654760580186"
      },
      {
        x: 206.19,
        y: 1267.5,
        _x: 206.19,
        _y: 1267.5,
        id: "_365190410731654760585064"
      },
      {
        x: 290.19,
        y: 1267.5,
        _x: 290.19,
        _y: 1267.5,
        id: "_388678075741654760590432"
      },
      {
        x: 290.19,
        y: 1379.6,
        _x: 290.19,
        _y: 1379.6,
        id: "_870653495751654760593039"
      },
      {
        x: 331.5,
        y: 1379.6,
        _x: 331.5,
        _y: 1379.6,
        id: "_139801814761654760596551"
      },
      {
        x: 410.03,
        y: 1379.6,
        _x: 410.03,
        _y: 1379.6,
        id: "_497535136781654760620320"
      },
      {
        x: 533.03,
        y: 1379.6,
        _x: 533.03,
        _y: 1379.6,
        id: "_674971359801654760687455"
      },
      {
        x: 615.67,
        y: 1379.6,
        _x: 615.67,
        _y: 1379.6,
        id: "_29581082821654760695696"
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#f5b83c",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_403393054591654762211864",
    points: [
      {
        x: 1113,
        y: 893.5,
        _x: 1113,
        _y: 893.5,
        id: "_337962508331654762686423"
      },
      {
        x: 1022.03,
        y: 892.5,
        _x: 1022.03,
        _y: 892.5,
        id: "_667929914321654762675296"
      },
      {
        x: 960.5,
        y: 892.5,
        _x: 960.5,
        _y: 892.5,
        id: "_454221891611654762211864"
      },
      {
        x: 876.03,
        y: 892.5,
        _x: 876.03,
        _y: 892.5,
        id: "_963468276631654762232327"
      },
      {
        x: 803.03,
        y: 892.5,
        _x: 803.03,
        _y: 892.5,
        id: "_946756003681654762252391"
      },
      {
        x: 744.5605797101449,
        y: 891.6,
        _x: 744.5605797101449,
        _y: 891.6,
        id: "_338803678691654762257535"
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#39c9e1",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_364826419611654763110426",
    points: [
      {
        x: 1097,
        y: 1129.5,
        _x: 1097,
        _y: 1129.5,
        id: "_512229261621654763110426"
      },
      {
        x: 1045.19,
        y: 1128.5,
        _x: 1045.19,
        _y: 1128.5,
        id: "_806581504631654763110426"
      },
      {
        x: 969.5,
        y: 1128.5,
        _x: 969.5,
        _y: 1128.5,
        id: "_38479717641654763118152"
      },
      {
        x: 905.19,
        y: 1128.5,
        _x: 905.19,
        _y: 1128.5,
        id: "_397170948651654763121600"
      },
      {
        x: 830.19,
        y: 1128.5,
        _x: 830.19,
        _y: 1128.5,
        id: "_298597676661654763126394"
      },
      {
        x: 754.56,
        y: 1126.15,
        _x: 754.56,
        _y: 1126.15,
        id: "_888335679671654763129704"
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#39c9e1",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_465812306681654763284488",
    points: [
      {
        x: 1103,
        y: 1379.5,
        _x: 1103,
        _y: 1379.5,
        id: "_433607814691654763284489"
      },
      {
        x: 1055.19,
        y: 1378.5,
        _x: 1055.19,
        _y: 1378.5,
        id: "_227382675701654763284489"
      },
      {
        x: 991.5,
        y: 1378.5,
        _x: 991.5,
        _y: 1378.5,
        id: "_895996175711654763303320"
      },
      {
        x: 893.19,
        y: 1378.5,
        _x: 893.19,
        _y: 1378.5,
        id: "_330221002721654763308064"
      },
      {
        x: 831.19,
        y: 1378.5,
        _x: 831.19,
        _y: 1378.5,
        id: "_58589547731654763321752"
      },
      {
        x: 743.56,
        y: 1379.6,
        _x: 743.56,
        _y: 1379.6,
        id: "_409239077741654763324744"
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#39c9e1",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_771694559441654763636476",
    points: [
      {
        x: 1129.5,
        y: 139,
        _x: 1129.5,
        _y: 139,
        id: "_731709583451654763636477"
      },
      {
        x: 1271.03,
        y: 139,
        _x: 1271.03,
        _y: 139,
        id: "_454862361461654763636477"
      },
      {
        x: 1355.03,
        y: 139,
        _x: 1355.03,
        _y: 139,
        id: "_202197550471654763642785"
      },
      {
        x: 1355.0299999999997,
        y: 248,
        _x: 1355.0299999999997,
        _y: 248,
        id: "_724556564481654763646873"
      },
      {
        x: 1355.03,
        y: 446.6,
        _x: 1355.03,
        _y: 446.6,
        id: "_224658562501654763657849"
      },
      {
        x: 1446,
        y: 446.6,
        _x: 1446,
        _y: 446.6,
        id: "_842957013511654763667705",
        overlapId: "_110143328751654842022450"
      },
      {
        x: 1507.5,
        y: 141,
        _x: 1507.5,
        _y: 141,
        id: "_767490951791654842044033",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 1623,
        y: 141,
        _x: 1623,
        _y: 141,
        id: "_25647065781654842038041",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1696,
        y: 141,
        _x: 1696,
        _y: 141,
        id: "_493017103771654842035169",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1696,
        y: 446.6,
        _x: 1696,
        _y: 446.6,
        id: "_929815915741654842022450",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 1446,
        y: 446.6,
        _x: 1446,
        _y: 446.6,
        isParentNode: false,
        overlapId: "_110143328751654842022450",
        id: "_332463103761654842022450",
        isReverse: true
      },
      {
        x: 1446,
        y: 446.6,
        _x: 1446,
        _y: 446.6,
        isParentNode: true,
        overlapId: "_110143328751654842022450",
        id: "_506064176811654842087204"
      },
      {
        x: 1446,
        y: 549.1,
        _x: 1446,
        _y: 549.1,
        id: "_650347245761654843768841",
        overlapId: "_608998390781654843810470"
      },
      {
        x: 1446,
        y: 677.6,
        _x: 1446,
        _y: 677.6,
        id: "_272863093801654842087204",
        overlapId: "_800509550841654842393746"
      },
      {
        x: 1446,
        y: 677.6,
        _x: 1446,
        _y: 677.6,
        isParentNode: true,
        overlapId: "_800509550841654842393746",
        id: "_898332582851654842393746"
      },
      {
        x: 1446,
        y: 859.6,
        _x: 1446,
        _y: 859.6,
        id: "_791743351831654842393745",
        overlapId: "_507916973881654842398858"
      },
      {
        x: 1561.16,
        y: 859.6,
        _x: 1561.16,
        _y: 859.6,
        id: "_341327964861654842395796"
      },
      {
        x: 1446,
        y: 859.6,
        _x: 1446,
        _y: 859.6,
        isParentNode: true,
        overlapId: "_507916973881654842398858",
        id: "_274395280891654842398858"
      },
      {
        x: 1446,
        y: 1010.6,
        _x: 1446,
        _y: 1010.6,
        id: "_713967325871654842398858",
        overlapId: "_183868274921654842404466"
      },
      {
        x: 1570.16,
        y: 1010.6,
        _x: 1570.16,
        _y: 1010.6,
        id: "_187057962901654842401035"
      },
      {
        x: 1446,
        y: 1010.6,
        _x: 1446,
        _y: 1010.6,
        isParentNode: true,
        overlapId: "_183868274921654842404466",
        id: "_797587661931654842404466"
      },
      {
        x: 1446,
        y: 1132.6,
        _x: 1446,
        _y: 1132.6,
        id: "_871422614911654842404466",
        overlapId: "_69666410961654842411713"
      },
      {
        x: 1580.16,
        y: 1132.6,
        _x: 1580.16,
        _y: 1132.6,
        id: "_23132789941654842406522"
      },
      {
        x: 1446,
        y: 1132.6,
        _x: 1446,
        _y: 1132.6,
        isParentNode: true,
        overlapId: "_69666410961654842411713",
        id: "_459146412971654842411713"
      },
      {
        x: 1446,
        y: 1268.6,
        _x: 1446,
        _y: 1268.6,
        id: "_129581559951654842411713",
        overlapId: "_7817937341001654842421857"
      },
      {
        x: 1579.16,
        y: 1268.6,
        _x: 1579.16,
        _y: 1268.6,
        id: "_45115522981654842413981"
      },
      {
        x: 1446,
        y: 1268.6,
        _x: 1446,
        _y: 1268.6,
        isParentNode: true,
        overlapId: "_7817937341001654842421857",
        id: "_8976702401011654842421857"
      },
      {
        x: 1448,
        y: 1416.6,
        _x: 1448,
        _y: 1416.6,
        id: "_933178492991654842421857",
        overlapId: "_7935732891301654844625696"
      },
      {
        x: 1581.16,
        y: 1416.6,
        _x: 1581.16,
        _y: 1416.6,
        id: "_7546248341021654842424450"
      },
      {
        x: 1446,
        y: 677.6,
        _x: 1446,
        _y: 677.6,
        isParentNode: true,
        overlapId: "_800509550841654842393746",
        id: "_947759707751654843734039"
      },
      {
        x: 1560.16,
        y: 677.6,
        _x: 1560.16,
        _y: 677.6,
        id: "_306136876741654843734039"
      },
      {
        x: 744.5605797101449,
        y: 865.6238775510204,
        _x: 744.5605797101449,
        _y: 865.6238775510204,
        id: "_510192907851654843928653",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 862,
        y: 867.5238775510204,
        _x: 862,
        _y: 867.5238775510204,
        id: "_649297050841654843925389",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 954,
        y: 867.5238775510204,
        _x: 954,
        _y: 867.5238775510204,
        id: "_416140378831654843921759",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1076,
        y: 867.5238775510204,
        _x: 1076,
        _y: 867.5238775510204,
        id: "_633251171821654843918909",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1076,
        y: 800.1,
        _x: 1076,
        _y: 800.1,
        id: "_292640416811654843915893",
        isReverse: true,
        isParentNode: false,
        overlapId: "_525406453871654843962093"
      },
      {
        x: 1227,
        y: 800.1,
        _x: 1227,
        _y: 800.1,
        id: "_187778166801654843903150",
        isReverse: true,
        isParentNode: false,
        overlapId: "_868361361061654844361342"
      },
      {
        x: 1227,
        y: 712.6,
        _x: 1227,
        _y: 712.6,
        isReverse: true,
        id: "_239514149901654844014213",
        overlapId: "_469095232921654844020349"
      },
      {
        x: 1227,
        y: 549.1,
        _x: 1227,
        _y: 549.1,
        id: "_970958313771654843810470",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 1446,
        y: 549.1,
        _x: 1446,
        _y: 549.1,
        isParentNode: false,
        overlapId: "_608998390781654843810470",
        id: "_775559741791654843810470",
        isReverse: true
      },
      {
        x: 789.5,
        y: 533,
        _x: 789.5,
        _y: 533,
        id: "_966802594961654844059685",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 789.5,
        y: 597,
        _x: 789.5,
        _y: 597,
        id: "_862918800951654844055837",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 789.5,
        y: 668,
        _x: 789.5,
        _y: 668,
        id: "_822833796941654844046710",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 789.5,
        y: 712.6,
        _x: 789.5,
        _y: 712.6,
        id: "_254693969911654844020349",
        isParentNode: false,
        isReverse: true,
        overlapId: "_272655780981654844066629"
      },
      {
        x: 1227,
        y: 712.6,
        _x: 1227,
        _y: 712.6,
        isParentNode: false,
        overlapId: "_469095232921654844020349",
        id: "_500226941931654844020349",
        isReverse: true
      },
      {
        x: 515,
        y: 538.65,
        _x: 515,
        _y: 538.65,
        id: "_3879917321041654844100157",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 515,
        y: 602,
        _x: 515,
        _y: 602,
        id: "_7209260831031654844097477",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 515,
        y: 667,
        _x: 515,
        _y: 667,
        id: "_3370470571021654844075781",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 515,
        y: 712.6,
        _x: 515,
        _y: 712.6,
        id: "_3241745571001654844071661",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 789.5,
        y: 712.6,
        _x: 789.5,
        _y: 712.6,
        isParentNode: false,
        overlapId: "_272655780981654844066629",
        id: "_6324159711011654844071661",
        isReverse: true
      },
      {
        x: 754.56,
        y: 1099.2400000000002,
        _x: 754.56,
        _y: 1099.2400000000002,
        id: "_3922419351121654844409196",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 853,
        y: 1099.2400000000002,
        _x: 853,
        _y: 1099.2400000000002,
        id: "_4933489171111654844405893",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 986,
        y: 1099.2400000000002,
        _x: 986,
        _y: 1099.2400000000002,
        id: "_7974535021101654844390012",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1082,
        y: 1099.2400000000002,
        _x: 1082,
        _y: 1099.2400000000002,
        id: "_1111174371091654844385391",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1082,
        y: 990.1,
        _x: 1082,
        _y: 990.1,
        id: "_180525381081654844380444",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1227,
        y: 990.1,
        _x: 1227,
        _y: 990.1,
        id: "_2303209161051654844361342",
        isParentNode: false,
        isReverse: true,
        overlapId: "_8580430401141654844448168"
      },
      {
        x: 1227,
        y: 800.1,
        _x: 1227,
        _y: 800.1,
        isParentNode: false,
        overlapId: "_868361361061654844361342",
        id: "_7217764351071654844361342",
        isReverse: true
      },
      {
        x: 743.56,
        y: 1352.69,
        _x: 743.56,
        _y: 1352.69,
        id: "_7443514221201654844480012",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 857,
        y: 1352.69,
        _x: 857,
        _y: 1352.69,
        id: "_2054198191191654844477046",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 985,
        y: 1352.69,
        _x: 985,
        _y: 1352.69,
        id: "_7574252441181654844464060",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1078,
        y: 1352.69,
        _x: 1078,
        _y: 1352.69,
        id: "_6371366571171654844461060",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1078,
        y: 1254.1,
        _x: 1078,
        _y: 1254.1,
        id: "_782727971161654844458532",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1227,
        y: 1254.1,
        _x: 1227,
        _y: 1254.1,
        id: "_357370461131654844448168",
        isParentNode: false,
        isReverse: true,
        overlapId: "_7186295051221654844539988"
      },
      {
        x: 1227,
        y: 990.1,
        _x: 1227,
        _y: 990.1,
        isParentNode: false,
        overlapId: "_8580430401141654844448168",
        id: "_1173519841151654844448168",
        isReverse: true
      },
      {
        x: 1227,
        y: 1254.1,
        _x: 1227,
        _y: 1254.1,
        isParentNode: true,
        overlapId: "_7186295051221654844539988",
        id: "_7259729271251654844565268"
      },
      {
        x: 1227,
        y: 1618.1,
        _x: 1227,
        _y: 1618.1,
        id: "_3920433821241654844565268"
      },
      {
        x: 1303.5,
        y: 1618.1,
        _x: 1303.5,
        _y: 1618.1,
        id: "_9727858471261654844572700"
      },
      {
        x: 1303.5,
        y: 1618.1,
        _x: 1303.5,
        _y: 1618.1,
        id: "_3993340051321654844629661",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 1448,
        y: 1618.1,
        _x: 1448,
        _y: 1618.1,
        id: "_6911296271291654844625696",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 1448,
        y: 1416.6,
        _x: 1448,
        _y: 1416.6,
        isParentNode: false,
        overlapId: "_7935732891301654844625696",
        id: "_7621296311311654844625697",
        isReverse: true
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#4b8bf4",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_403474388541654763937659",
    points: [
      {
        x: 1825.03,
        y: 1556.6,
        _x: 1825.03,
        _y: 1556.6,
        id: "_3629110791151654765320068"
      },
      {
        x: 1733.03,
        y: 1556.6,
        _x: 1733.03,
        _y: 1556.6,
        id: "_2244114251131654765302019"
      },
      {
        x: 1589.03,
        y: 1556.6,
        _x: 1589.03,
        _y: 1556.6,
        id: "_2260103771111654765291867"
      },
      {
        x: 1522.5,
        y: 1556.6,
        _x: 1522.5,
        _y: 1556.6,
        id: "_3635901461061654765230868"
      },
      {
        x: 1324,
        y: 1556.6,
        _x: 1324,
        _y: 1556.6,
        id: "_7049639031021654765211531"
      },
      {
        x: 1324,
        y: 1343.5,
        _x: 1324,
        _y: 1343.5,
        id: "_782616531981654765197059",
        overlapId: "_9031743491041654765214387"
      },
      {
        x: 1324,
        y: 1093.5,
        _x: 1324,
        _y: 1093.5,
        id: "_478012205951654765179355",
        overlapId: "_413812141001654765200357"
      },
      {
        x: 1324,
        y: 857.5,
        _x: 1324,
        _y: 857.5,
        id: "_31876213851654764961987",
        overlapId: "_81260120881654764984843"
      },
      {
        x: 1324,
        y: 622.15,
        _x: 1324,
        _y: 622.15,
        id: "_867722631551654763937659",
        overlapId: "_4929798641231654765445203"
      },
      {
        x: 1001,
        y: 622.15,
        _x: 1001,
        _y: 622.15,
        id: "_806258137561654763937659",
        overlapId: "_306279551591654763991602"
      },
      {
        x: 1001,
        y: 477.5,
        _x: 1001,
        _y: 477.5,
        id: "_80016972571654763983219"
      },
      {
        x: 970.5,
        y: 477.5,
        _x: 970.5,
        _y: 477.5,
        id: "_517874559611654763993210"
      },
      {
        x: 875.03,
        y: 477.5,
        _x: 875.03,
        _y: 477.5,
        id: "_103331804621654763996404"
      },
      {
        x: 827.75,
        y: 477.5,
        _x: 827.75,
        _y: 477.5,
        id: "_827474153631654764000218"
      },
      {
        x: 1001,
        y: 622.15,
        _x: 1001,
        _y: 622.15,
        isParentNode: true,
        overlapId: "_306279551591654763991602",
        id: "_381072929601654763991603"
      },
      {
        x: 694,
        y: 622.15,
        _x: 694,
        _y: 622.15,
        id: "_260761928581654763991602"
      },
      {
        x: 694,
        y: 481.15,
        _x: 694,
        _y: 481.15,
        id: "_862243060651654764060522"
      },
      {
        x: 604.03,
        y: 481.15,
        _x: 604.03,
        _y: 481.15,
        id: "_269058974661654764064074"
      },
      {
        x: 554.6283783783783,
        y: 481.15,
        _x: 554.6283783783783,
        _y: 481.15,
        id: "_963922194671654764071986"
      },
      {
        x: 1324,
        y: 857.5,
        _x: 1324,
        _y: 857.5,
        isParentNode: true,
        overlapId: "_81260120881654764984843",
        id: "_224910971971654765191299"
      },
      {
        x: 1191.84,
        y: 857.5,
        _x: 1191.84,
        _y: 857.5,
        id: "_728106743961654765191299"
      },
      {
        x: 1324,
        y: 1093.5,
        _x: 1324,
        _y: 1093.5,
        isParentNode: true,
        overlapId: "_413812141001654765200357",
        id: "_4112576731011654765200357"
      },
      {
        x: 1175.84,
        y: 1093.5,
        _x: 1175.84,
        _y: 1093.5,
        id: "_39551136991654765200357"
      },
      {
        x: 1324,
        y: 1343.5,
        _x: 1324,
        _y: 1343.5,
        isParentNode: true,
        overlapId: "_9031743491041654765214387",
        id: "_5503390631051654765214387"
      },
      {
        x: 1181.84,
        y: 1343.5,
        _x: 1181.84,
        _y: 1343.5,
        id: "_7530225651031654765214387"
      },
      {
        x: 1324,
        y: 622.15,
        _x: 1324,
        _y: 622.15,
        isParentNode: true,
        overlapId: "_4929798641231654765445203",
        id: "_9357990381241654765445203"
      },
      {
        x: 1324,
        y: 414.5,
        _x: 1324,
        _y: 414.5,
        id: "_8613331731221654765445203",
        overlapId: "_163348416541654767763286"
      },
      {
        x: 1324,
        y: 291,
        _x: 1324,
        _y: 291,
        id: "_176878606821654846081431"
      },
      {
        x: 1239.19,
        y: 291,
        _x: 1239.19,
        _y: 291,
        id: "_977995252481654767156651"
      },
      {
        x: 1173,
        y: 291,
        _x: 1173,
        _y: 291,
        id: "_437017356571654767271468"
      },
      {
        x: 1061,
        y: 291,
        _x: 1061,
        _y: 291,
        id: "_398525193581654767288460"
      },
      {
        x: 1061,
        y: 240,
        _x: 1061,
        _y: 240,
        id: "_23803005601654767296980"
      },
      {
        x: 1065,
        y: 188.5,
        _x: 1065,
        _y: 188.5,
        id: "_318798915611654767302811"
      },
      {
        x: 1324,
        y: 414.5,
        _x: 1324,
        _y: 414.5,
        isParentNode: true,
        overlapId: "_163348416541654767763286",
        id: "_119550168551654767763286"
      },
      {
        x: 1617,
        y: 414.5,
        _x: 1617,
        _y: 414.5,
        id: "_284359117531654767763286"
      },
      {
        x: 1617,
        y: 300.5,
        _x: 1617,
        _y: 300.5,
        id: "_473227537561654767769606"
      },
      {
        x: 1576.19,
        y: 300.5,
        _x: 1576.19,
        _y: 300.5,
        id: "_13954805571654767772144"
      },
      {
        x: 1535,
        y: 300.5,
        _x: 1535,
        _y: 300.5,
        id: "_646704379591654767780774"
      },
      {
        x: 1439,
        y: 300.5,
        _x: 1439,
        _y: 300.5,
        id: "_30947985601654767793632"
      },
      {
        x: 1439,
        y: 231,
        _x: 1439,
        _y: 231,
        id: "_118807522611654767795831"
      },
      {
        x: 1443,
        y: 190.5,
        _x: 1443,
        _y: 190.5,
        id: "_39637077631654767817815"
      },
      {
        x: 1747,
        y: 622.15,
        _x: 1747,
        _y: 622.15,
        id: "_259959119641654844833928",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 1688,
        y: 622.15,
        _x: 1688,
        _y: 622.15,
        id: "_255229391631654844814432",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1605,
        y: 622.15,
        _x: 1605,
        _y: 622.15,
        id: "_149864285621654844811663",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1497,
        y: 622.15,
        _x: 1497,
        _y: 622.15,
        id: "_683851034601654844807759",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 1324,
        y: 622.15,
        _x: 1324,
        _y: 622.15,
        isParentNode: false,
        overlapId: "_4929798641231654765445203",
        id: "_217682537611654844807759",
        isReverse: true
      }
    ],
    textData: [],
    colors: [
      "#333333",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#39c9e1",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_8779400551021654768453151",
    points: [
      {
        x: 1658,
        y: 1304.6,
        _x: 1658,
        _y: 1304.6,
        id: "_4853992281141654768781077"
      },
      {
        x: 1733.19,
        y: 1308.6,
        _x: 1733.19,
        _y: 1308.6,
        id: "_9262759471031654768453151"
      },
      {
        x: 1779,
        y: 1308.6,
        _x: 1779,
        _y: 1308.6,
        id: "_2575238101041654768453151",
        overlapId: "_610451251781654844998232"
      },
      {
        x: 1857.03,
        y: 1308.6,
        _x: 1857.03,
        _y: 1308.6,
        id: "_5366065981091654768484100"
      },
      {
        x: 1923.5,
        y: 1308.6,
        _x: 1923.5,
        _y: 1308.6,
        id: "_2102355851191654768844901"
      },
      {
        x: 1990.5,
        y: 1308.6,
        _x: 1990.5,
        _y: 1308.6,
        id: "_6972715281201654768852973"
      },
      {
        x: 1659,
        y: 1168.6,
        _x: 1659,
        _y: 1168.6,
        id: "_25143327811654845006232",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 1723,
        y: 1170.6,
        _x: 1723,
        _y: 1170.6,
        id: "_812440648801654845001104",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1778,
        y: 1170.6,
        _x: 1778,
        _y: 1170.6,
        id: "_286463501771654844998232",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 1779,
        y: 1308.6,
        _x: 1779,
        _y: 1308.6,
        isParentNode: false,
        overlapId: "_610451251781654844998232",
        id: "_301120113791654844998232",
        isReverse: true
      },
      {
        x: 1660,
        y: 1452.6,
        _x: 1660,
        _y: 1452.6,
        id: "_564851097851654845130713",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 1732.75,
        y: 1454.6,
        _x: 1732.75,
        _y: 1454.6,
        id: "_31494587841654845126561",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1779,
        y: 1454.6,
        _x: 1779,
        _y: 1454.6,
        id: "_249071116821654845122105",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 1779,
        y: 1308.6,
        _x: 1779,
        _y: 1308.6,
        isParentNode: false,
        overlapId: "_610451251781654844998232",
        id: "_967531896831654845122105",
        isReverse: true
      }
    ],
    textData: [],
    colors: [
      "#ffffff",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#4b8be0",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_1221372631654770606491",
    points: [
      {
        x: 1640,
        y: 895.6,
        _x: 1640,
        _y: 895.6,
        id: "_979673884641654770606491"
      },
      {
        x: 1687.03,
        y: 896.5,
        _x: 1687.03,
        _y: 896.5,
        id: "_137301926651654770606491"
      }
    ],
    textData: [],
    colors: [
      "#ffffff",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#4b8be0",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_724156736661654770613505",
    points: [
      {
        x: 1704.19,
        y: 896.5,
        _x: 1704.19,
        _y: 896.5,
        id: "_298071364671654770613506"
      },
      {
        x: 1763,
        y: 896.5,
        _x: 1763,
        _y: 896.5,
        id: "_186185819681654770613506",
        bindTextIds: [
          "_971294385791654770671928"
        ],
        overlapId: "_604180789661654844908056"
      },
      {
        x: 1827.03,
        y: 896.5,
        _x: 1827.03,
        _y: 896.5,
        id: "_349485066691654770630376",
        bindTextIds: [
          "_971294385791654770671928"
        ]
      },
      {
        x: 1883.5,
        y: 896.5,
        _x: 1883.5,
        _y: 896.5,
        id: "_48784210801654770674119"
      },
      {
        x: 1955.5,
        y: 896.5,
        _x: 1955.5,
        _y: 896.5,
        id: "_363840394821654770686647"
      },
      {
        x: 1639,
        y: 713.6,
        _x: 1639,
        _y: 713.6,
        id: "_202121017691654844918192",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 1694,
        y: 713.6,
        _x: 1694,
        _y: 713.6,
        id: "_950896779681654844915330",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1765,
        y: 713.6,
        _x: 1765,
        _y: 713.6,
        id: "_296004454651654844908056",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 1763,
        y: 896.5,
        _x: 1763,
        _y: 896.5,
        isParentNode: false,
        overlapId: "_604180789661654844908056",
        id: "_235723009671654844908056",
        isReverse: true
      },
      {
        x: 1649,
        y: 1046.6,
        _x: 1649,
        _y: 1046.6,
        id: "_584834871761654844957568",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 1699,
        y: 1046.6,
        _x: 1699,
        _y: 1046.6,
        id: "_848005508751654844953856",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 1763,
        y: 1046.6,
        _x: 1763,
        _y: 1046.6,
        id: "_859847082701654844939608",
        isParentNode: false,
        isReverse: true,
        overlapId: "_146391237731654844945986"
      },
      {
        x: 1763,
        y: 896.5,
        _x: 1763,
        _y: 896.5,
        isParentNode: false,
        overlapId: "_604180789661654844908056",
        id: "_84808585711654844939608",
        isReverse: true
      }
    ],
    textData: [
      {
        id: "_971294385791654770671928",
        startIndex: 1,
        endIndex: 2,
        value: "",
        width: 0,
        height: 0,
        position: "top",
        editable: false,
        initValue: ""
      }
    ],
    colors: [
      "#ffffff",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#4b8be0",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_5763744961281654772312386",
    points: [
      {
        x: 1840,
        y: 627.5,
        _x: 1840,
        _y: 627.5,
        id: "_7342640291291654772312387"
      },
      {
        x: 2114,
        y: 627.5,
        _x: 2114,
        _y: 627.5,
        id: "_2139048121301654772312387",
        overlapId: "_1465081791341654772349049"
      },
      {
        x: 2337,
        y: 627.5,
        _x: 2337,
        _y: 627.5,
        id: "_4222801251321654772348032",
        overlapId: "_4694600131491654772596143"
      },
      {
        x: 2337,
        y: 491.5,
        _x: 2337,
        _y: 491.5,
        id: "_1921484261471654772592214"
      },
      {
        x: 2321,
        y: 491.5,
        _x: 2321,
        _y: 491.5,
        id: "_955987741511654772598175"
      },
      {
        x: 2248.15,
        y: 491.5,
        _x: 2248.15,
        _y: 491.5,
        id: "_7825779191571654772627551"
      },
      {
        x: 2230.55,
        y: 491.5,
        _x: 2230.55,
        _y: 491.5,
        id: "_7966383351581654772630961"
      },
      {
        x: 2191.85,
        y: 491.5,
        _x: 2191.85,
        _y: 491.5,
        id: "_7010110241591654772635430",
        bindTextIds: [
          "_648279721641654772717079"
        ]
      },
      {
        x: 2191.85,
        y: 406,
        _x: 2191.85,
        _y: 406,
        id: "_1275624611631654772712702",
        bindTextIds: [
          "_648279721641654772717079"
        ]
      },
      {
        x: 2191.85,
        y: 358,
        _x: 2191.85,
        _y: 358,
        id: "_2821959811651654772747766"
      },
      {
        x: 2191.85,
        y: 284,
        _x: 2191.85,
        _y: 284,
        id: "_3438913821661654772751638"
      },
      {
        x: 2191.85,
        y: 222.5,
        _x: 2191.85,
        _y: 222.5,
        id: "_8743664991671654772757030"
      },
      {
        x: 2114,
        y: 627.5,
        _x: 2114,
        _y: 627.5,
        isParentNode: true,
        overlapId: "_1465081791341654772349049",
        id: "_843387591351654772349049"
      },
      {
        x: 2114,
        y: 490.5,
        _x: 2114,
        _y: 490.5,
        id: "_9763214141331654772349049"
      },
      {
        x: 2080,
        y: 490.5,
        _x: 2080,
        _y: 490.5,
        id: "_6626877301361654772371095"
      },
      {
        x: 2008.19,
        y: 490.5,
        _x: 2008.19,
        _y: 490.5,
        id: "_8310955371381654772401015"
      },
      {
        x: 1970.19,
        y: 490.5,
        _x: 1970.19,
        _y: 490.5,
        id: "_873494231391654772415287"
      },
      {
        x: 1970.19,
        y: 392,
        _x: 1970.19,
        _y: 392,
        id: "_1276022051401654772417751"
      },
      {
        x: 1970.19,
        y: 354,
        _x: 1970.19,
        _y: 354,
        id: "_9729352541421654772431496"
      },
      {
        x: 1970.19,
        y: 306,
        _x: 1970.19,
        _y: 306,
        id: "_3870842721441654772443999"
      },
      {
        x: 1970.19,
        y: 221.5,
        _x: 1970.19,
        _y: 221.5,
        id: "_5280496481461654772450575"
      },
      {
        x: 2337,
        y: 627.5,
        _x: 2337,
        _y: 627.5,
        isParentNode: true,
        overlapId: "_4694600131491654772596143",
        id: "_7697039771501654772596143"
      },
      {
        x: 2583,
        y: 627.5,
        _x: 2583,
        _y: 627.5,
        id: "_3088705501481654772596143",
        overlapId: "_4530440771701654772797782"
      },
      {
        x: 2583,
        y: 491.5,
        _x: 2583,
        _y: 491.5,
        id: "_3663281021681654772793982"
      },
      {
        x: 2533,
        y: 491.5,
        _x: 2533,
        _y: 491.5,
        id: "_7590443351721654772801494"
      },
      {
        x: 2461.19,
        y: 491.5,
        _x: 2461.19,
        _y: 491.5,
        id: "_5684065901741654772813838"
      },
      {
        x: 2414.19,
        y: 491.5,
        _x: 2414.19,
        _y: 491.5,
        id: "_3294061521771654772841238"
      },
      {
        x: 2414.19,
        y: 416,
        _x: 2414.19,
        _y: 416,
        id: "_4958995771781654772844054"
      },
      {
        x: 2414.19,
        y: 358,
        _x: 2414.19,
        _y: 358,
        id: "_9267580151821654772873822"
      },
      {
        x: 2414.19,
        y: 302,
        _x: 2414.19,
        _y: 302,
        id: "_4720953151831654772877606"
      },
      {
        x: 2414.19,
        y: 210.5,
        _x: 2414.19,
        _y: 210.5,
        id: "_5975692331841654772883974"
      },
      {
        x: 2583,
        y: 627.5,
        _x: 2583,
        _y: 627.5,
        isParentNode: true,
        overlapId: "_4530440771701654772797782",
        id: "_8205065291711654772797782"
      },
      {
        x: 2783,
        y: 627.5,
        _x: 2783,
        _y: 627.5,
        id: "_104936961691654772797782"
      },
      {
        x: 2783,
        y: 499.5,
        _x: 2783,
        _y: 499.5,
        id: "_7820528381901654772927543"
      },
      {
        x: 2739,
        y: 499.5,
        _x: 2739,
        _y: 499.5,
        id: "_3050207001911654772931824"
      },
      {
        x: 2672.19,
        y: 499.5,
        _x: 2672.19,
        _y: 499.5,
        id: "_3924164631921654772935775"
      },
      {
        x: 2633.19,
        y: 499.5,
        _x: 2633.19,
        _y: 499.5,
        id: "_6083363081931654772939047"
      },
      {
        x: 2633.19,
        y: 422,
        _x: 2633.19,
        _y: 422,
        id: "_1078502591941654772941095"
      },
      {
        x: 2633.19,
        y: 346,
        _x: 2633.19,
        _y: 346,
        id: "_2871654971951654772949494"
      },
      {
        x: 2633.19,
        y: 279,
        _x: 2633.19,
        _y: 279,
        id: "_8912642851961654772953550"
      },
      {
        x: 2633.19,
        y: 212.5,
        _x: 2633.19,
        _y: 212.5,
        id: "_4633450331971654772956406"
      }
    ],
    textData: [
      {
        id: "_648279721641654772717079",
        startIndex: 7,
        endIndex: 8,
        value: "",
        width: 0,
        height: 0,
        position: "top",
        editable: false,
        initValue: ""
      }
    ],
    colors: [
      "#ffffff",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#9383dc",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_9347669182271654773693615",
    points: [
      {
        x: 2016.94,
        y: 175,
        _x: 2016.94,
        _y: 175,
        id: "_4068371252281654773693616"
      },
      {
        x: 2098,
        y: 175,
        _x: 2098,
        _y: 175,
        id: "_5546560332291654773693616"
      },
      {
        x: 2098,
        y: 266,
        _x: 2098,
        _y: 266,
        id: "_1766442992301654773698476"
      },
      {
        x: 2098,
        y: 330,
        _x: 2098,
        _y: 330,
        id: "_3083473362311654773717332"
      },
      {
        x: 2098,
        y: 522.6,
        _x: 2098,
        _y: 522.6,
        id: "_6100367102331654773730980"
      },
      {
        x: 2322,
        y: 522.6,
        _x: 2322,
        _y: 522.6,
        id: "_3922228782341654773766500",
        overlapId: "_995267461491654845292017"
      },
      {
        x: 2537,
        y: 522.6,
        _x: 2537,
        _y: 522.6,
        id: "_7497194142351654773769788",
        overlapId: "_515940788551654845326913"
      },
      {
        x: 2780,
        y: 522.6,
        _x: 2780,
        _y: 522.6,
        id: "_1681985782361654773773428",
        overlapId: "_607596449671654845355097"
      },
      {
        x: 2866,
        y: 522.6,
        _x: 2866,
        _y: 522.6,
        id: "_7054619622551654774023339"
      },
      {
        x: 2866,
        y: 592,
        _x: 2866,
        _y: 592,
        id: "_707943522561654774025620"
      },
      {
        x: 1882,
        y: 593,
        _x: 1882,
        _y: 593,
        id: "_9612415092571654774028067"
      },
      {
        x: 1845,
        y: 593,
        _x: 1845,
        _y: 593,
        id: "_4729664272581654774040523"
      },
      {
        x: 2246.6,
        y: 173,
        _x: 2246.6,
        _y: 173,
        id: "_634678570531654845302561",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 2322,
        y: 173,
        _x: 2322,
        _y: 173,
        id: "_384980644521654845299937",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 2322,
        y: 281,
        _x: 2322,
        _y: 281,
        id: "_481340428511654845296971",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 2322,
        y: 371,
        _x: 2322,
        _y: 371,
        id: "_964624869481654845292017",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 2322,
        y: 522.6,
        _x: 2322,
        _y: 522.6,
        isParentNode: false,
        overlapId: "_995267461491654845292017",
        id: "_684747535501654845292017",
        isReverse: true
      },
      {
        x: 2537,
        y: 381,
        _x: 2537,
        _y: 381,
        id: "_130704388541654845326913",
        isParentNode: true,
        isReverse: true,
        overlapId: "_214894878581654845329921"
      },
      {
        x: 2537,
        y: 522.6,
        _x: 2537,
        _y: 522.6,
        isParentNode: false,
        overlapId: "_515940788551654845326913",
        id: "_882216604561654845326913",
        isReverse: true
      },
      {
        x: 2537,
        y: 381,
        _x: 2537,
        _y: 381,
        isParentNode: true,
        overlapId: "_214894878581654845329921",
        id: "_83609828591654845329921"
      },
      {
        x: 2537,
        y: 290,
        _x: 2537,
        _y: 290,
        id: "_191235581571654845329921",
        overlapId: "_753518341611654845333817"
      },
      {
        x: 2468.94,
        y: 161,
        _x: 2468.94,
        _y: 161,
        id: "_49823267721654845384737",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 2537,
        y: 161,
        _x: 2537,
        _y: 161,
        id: "_156261925601654845333817",
        isParentNode: false,
        isReverse: true,
        overlapId: "_256658405641654845337595"
      },
      {
        x: 2537,
        y: 290,
        _x: 2537,
        _y: 290,
        isParentNode: false,
        overlapId: "_753518341611654845333817",
        id: "_255837638621654845333817",
        isReverse: true
      },
      {
        x: 2687.94,
        y: 163,
        _x: 2687.94,
        _y: 163,
        id: "_507227473711654845371201",
        isReverse: true,
        isParentNode: true
      },
      {
        x: 2780,
        y: 163,
        _x: 2780,
        _y: 163,
        id: "_336988309701654845368401",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 2780,
        y: 258,
        _x: 2780,
        _y: 258,
        id: "_648491754691654845365297",
        isReverse: true,
        isParentNode: false
      },
      {
        x: 2780,
        y: 376,
        _x: 2780,
        _y: 376,
        id: "_936240165661654845355097",
        isParentNode: false,
        isReverse: true
      },
      {
        x: 2780,
        y: 522.6,
        _x: 2780,
        _y: 522.6,
        isParentNode: false,
        overlapId: "_607596449671654845355097",
        id: "_138387959681654845355097",
        isReverse: true
      }
    ],
    textData: [],
    colors: [
      "#ffffff",
      "#B9C0CC"
    ],
    isFloating: true,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 2,
      outerColor: "#f56662",
      outerSize: 6,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: true
  },
  {
    id: "PipePath_264883580451654845624041",
    points: [
      {
        x: 361.65,
        y: 1590,
        _x: 361.65,
        _y: 1590,
        id: "_432445544461654845624042"
      },
      {
        x: 361.65,
        y: 1538,
        _x: 361.65,
        _y: 1538,
        id: "_100106144471654845624042"
      },
      {
        x: 326.65,
        y: 1538,
        _x: 326.65,
        _y: 1538,
        id: "_682979327481654845731404"
      },
      {
        x: 326.65,
        y: 1599,
        _x: 326.65,
        _y: 1599,
        id: "_652007349491654845736915"
      },
      {
        x: 300.75,
        y: 1599,
        _x: 300.75,
        _y: 1599,
        id: "_396236947501654845742267"
      }
    ],
    textData: [],
    colors: [
      "#ffffff",
      "#B9C0CC"
    ],
    isFloating: false,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 0,
      outerColor: "#B9C0CC",
      outerSize: 4,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: false
  },
  {
    id: "PipePath_158080449511654845796013",
    points: [
      {
        x: 221.25,
        y: 1599,
        _x: 221.25,
        _y: 1599,
        id: "_482497002521654845796014"
      },
      {
        x: 168.67000000000002,
        y: 1599.75,
        _x: 168.67000000000002,
        _y: 1599.75,
        id: "_526197771531654845796014"
      }
    ],
    textData: [],
    colors: [
      "#ffffff",
      "#B9C0CC"
    ],
    isFloating: false,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 0,
      outerColor: "#B9C0CC",
      outerSize: 4,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: false
  },
  {
    id: "PipePath_828893084541654845804471",
    points: [
      {
        x: 94.72,
        y: 1599.75,
        _x: 94.72,
        _y: 1599.75,
        id: "_765636871551654845804472"
      },
      {
        x: 22.5,
        y: 1599.75,
        _x: 22.5,
        _y: 1599.75,
        id: "_399370725561654845804472"
      },
      {
        x: 22.5,
        y: 354,
        _x: 22.5,
        _y: 354,
        id: "_546589274571654845826642"
      },
      {
        x: 72.5,
        y: 354,
        _x: 72.5,
        _y: 354,
        id: "_547567651581654845861257",
        overlapId: "_796439189621654845893161"
      },
      {
        x: 72.5,
        y: 125,
        _x: 72.5,
        _y: 125,
        id: "_609014345591654845869457"
      },
      {
        x: 101.5,
        y: 123.15,
        _x: 101.5,
        _y: 123.15,
        id: "_298159999601654845882899"
      },
      {
        x: 72.5,
        y: 354,
        _x: 72.5,
        _y: 354,
        isParentNode: true,
        overlapId: "_796439189621654845893161",
        id: "_335208087631654845893161"
      },
      {
        x: 443.5,
        y: 354,
        _x: 443.5,
        _y: 354,
        id: "_628844197611654845893161",
        overlapId: "_414128512671654845946521"
      },
      {
        x: 443.5,
        y: 134,
        _x: 443.5,
        _y: 134,
        id: "_362049312641654845928411"
      },
      {
        x: 483.5,
        y: 134.19,
        _x: 483.5,
        _y: 134.19,
        id: "_764078538651654845932131"
      },
      {
        x: 443.5,
        y: 354,
        _x: 443.5,
        _y: 354,
        isParentNode: true,
        overlapId: "_414128512671654845946521",
        id: "_102348219681654845946521"
      },
      {
        x: 515,
        y: 354,
        _x: 515,
        _y: 354,
        id: "_662988525691654845980672",
        overlapId: "_775168952711654845985176"
      },
      {
        x: 789.5,
        y: 354,
        _x: 789.5,
        _y: 354,
        id: "_410093618661654845946521",
        overlapId: "_179816932751654846001600"
      },
      {
        x: 907.5,
        y: 354,
        _x: 907.5,
        _y: 354,
        id: "_317753814731654845999714",
        overlapId: "_305734510791654846026832"
      },
      {
        x: 1728.5,
        y: 354,
        _x: 1728.5,
        _y: 354,
        id: "_217518494771654846025096"
      },
      {
        x: 1728.5,
        y: 174,
        _x: 1728.5,
        _y: 174,
        id: "_830142225841654846187639"
      },
      {
        x: 1770.25,
        y: 174,
        _x: 1770.25,
        _y: 174,
        id: "_546707876851654846189984"
      },
      {
        x: 515,
        y: 354,
        _x: 515,
        _y: 354,
        isParentNode: true,
        overlapId: "_775168952711654845985176",
        id: "_650773222721654845985176"
      },
      {
        x: 515,
        y: 423.65,
        _x: 515,
        _y: 423.65,
        id: "_88235097701654845985176"
      },
      {
        x: 789.5,
        y: 354,
        _x: 789.5,
        _y: 354,
        isParentNode: true,
        overlapId: "_179816932751654846001600",
        id: "_483041156761654846001600"
      },
      {
        x: 789.5,
        y: 422,
        _x: 789.5,
        _y: 422,
        id: "_741828356741654846001600"
      },
      {
        x: 907.5,
        y: 354,
        _x: 907.5,
        _y: 354,
        isParentNode: true,
        overlapId: "_305734510791654846026832",
        id: "_341412733801654846026832"
      },
      {
        x: 907.5,
        y: 139,
        _x: 907.5,
        _y: 139,
        id: "_548889726781654846026832"
      },
      {
        x: 1000.5,
        y: 139,
        _x: 1000.5,
        _y: 139,
        id: "_192683000811654846029394"
      }
    ],
    textData: [],
    colors: [
      "#ffffff",
      "#B9C0CC"
    ],
    isFloating: false,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 0,
      outerColor: "#B9C0CC",
      outerSize: 4,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: false
  },
  {
    id: "PipePath_175111705861654846198898",
    points: [
      {
        x: 1849.75,
        y: 174,
        _x: 1849.75,
        _y: 174,
        id: "_464441635871654846198899"
      },
      {
        x: 1898,
        y: 175.5,
        _x: 1898,
        _y: 175.5,
        id: "_444085618881654846198899"
      },
      {
        x: 1898,
        y: 629.5,
        _x: 1898,
        _y: 629.5,
        id: "_409636787891654846203943"
      }
    ],
    textData: [],
    colors: [
      "#ffffff",
      "#B9C0CC"
    ],
    isFloating: false,
    isReverse: false,
    style: {
      innerColor: "#ffffff",
      innerSize: 0,
      outerColor: "#B9C0CC",
      outerSize: 4,
      outerOpacity: 100,
      dottedSize: 2,
      dottedMargin: 5
    },
    type: "flat",
    conditionData: [],
    speed: 1,
    showArrow: false
  },
  {
    id: "LabelValue_292283135841654764897870",
    position: "vertical",
    labelText: "\u63A5\u7EFC\u5408\u697C\u51B7\u51BB\u6C34\u56DE\u6C34",
    valueText: "value",
    rotate: 0,
    dataKey: null,
    labelX: 1693,
    labelY: 1585,
    labelCssProps: {
      "font-size": "14px"
    },
    valueCssProps: {
      "font-size": "14px",
      color: "#3333FF"
    },
    unitCssProps: {
      "font-size": "14px"
    },
    hideValue: true,
    hideUnit: false,
    hideLabel: false,
    hideBg: false,
    conditionData: []
  },
  {
    id: "LabelValue_196830877711654768012948",
    position: "vertical",
    labelText: "\u63A5\u5382\u623F4\u51B7\u51BB\u6C34\u5404\u7ACB\u7BA1\u56DE\u6C34",
    valueText: "value",
    rotate: 0,
    dataKey: null,
    labelX: 1615,
    labelY: 644,
    labelCssProps: {
      "font-size": "14px"
    },
    valueCssProps: {
      "font-size": "14px",
      color: "#3333FF"
    },
    unitCssProps: {
      "font-size": "14px"
    },
    hideValue: true,
    hideUnit: false,
    hideLabel: false,
    hideBg: false,
    conditionData: []
  },
  {
    id: "LabelValue_698237693541654770474873",
    position: "vertical",
    labelText: "\u63A5\u7EFC\u5408\u697C\u51B7\u51BB\u6C34\u4F9B\u6C34",
    valueText: "value",
    rotate: 0,
    dataKey: null,
    labelX: 1860,
    labelY: 1329,
    labelCssProps: {
      "font-size": "14px"
    },
    valueCssProps: {
      "font-size": "14px",
      color: "#3333FF"
    },
    unitCssProps: {
      "font-size": "14px"
    },
    hideValue: true,
    hideUnit: false,
    hideLabel: false,
    hideBg: false,
    conditionData: []
  },
  {
    id: "LabelValue_649567467831654770692954",
    position: "vertical",
    labelText: "\u63A5\u7EFC\u5408\u697C\u51B7\u51BB\u6C34\u4F9B\u6C34",
    valueText: "value",
    rotate: 0,
    dataKey: null,
    labelX: 1859,
    labelY: 916,
    labelCssProps: {
      "font-size": "14px"
    },
    valueCssProps: {
      "font-size": "14px",
      color: "#3333FF"
    },
    unitCssProps: {
      "font-size": "14px"
    },
    hideValue: true,
    hideUnit: false,
    hideLabel: false,
    hideBg: false,
    conditionData: []
  },
  {
    id: "LabelValue_2082667011311654772317234",
    position: "vertical",
    labelText: "\u63A5\u5382\u623F4\u5C4B\u9762\u70ED\u6C34\u8865\u7ED9",
    valueText: "value",
    rotate: 0,
    dataKey: null,
    labelX: 1845,
    labelY: 648,
    labelCssProps: {
      "font-size": "14px"
    },
    valueCssProps: {
      "font-size": "14px",
      color: "#3333FF"
    },
    unitCssProps: {
      "font-size": "14px"
    },
    hideValue: true,
    hideUnit: false,
    hideLabel: false,
    hideBg: false,
    conditionData: []
  },
  {
    id: "LabelValue_709127016501654914091241",
    position: "horizontal",
    labelText: "\u8D1F\u8377",
    valueText: "value",
    unitText: "%",
    rotate: 0,
    dataKey: "top-50-1",
    labelX: 1202,
    labelY: 44,
    labelCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    valueCssProps: {
      color: "#172B4D",
      "font-family": "inhert",
      "font-size": "14px",
      "font-weight": "bold"
    },
    unitCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    hideValue: false,
    hideUnit: false,
    hideLabel: false,
    hideBg: true,
    conditionData: []
  },
  {
    id: "LabelValue_661843668511654914153642",
    position: "horizontal",
    labelText: "\u80FD\u6548",
    valueText: "value",
    rotate: 0,
    dataKey: "top-12-1",
    labelX: 1373,
    labelY: 44,
    labelCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    valueCssProps: {
      color: "#172B4D",
      "font-family": "inhert",
      "font-size": "14px",
      "font-weight": "bold"
    },
    unitCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    hideValue: false,
    hideUnit: true,
    hideLabel: false,
    hideBg: true,
    conditionData: []
  },
  {
    id: "LabelValue_991560683521654914171369",
    position: "horizontal",
    labelText: "\u529F\u7387",
    valueText: "value",
    unitText: "kW",
    rotate: 0,
    dataKey: "top-248-1",
    labelX: 1536,
    labelY: 45,
    labelCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    valueCssProps: {
      color: "#172B4D",
      "font-family": "inhert",
      "font-size": "14px",
      "font-weight": "bold"
    },
    unitCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    hideValue: false,
    hideUnit: false,
    hideLabel: false,
    hideBg: true,
    conditionData: []
  },
  {
    id: "LabelValue_578317493531654914192881",
    position: "horizontal",
    labelText: "\u51B7\u91CF",
    valueText: "value",
    unitText: "kW",
    rotate: 0,
    dataKey: "top-2160-1",
    labelX: 1710,
    labelY: 45,
    labelCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    valueCssProps: {
      color: "#172B4D",
      "font-family": "inhert",
      "font-size": "14px",
      "font-weight": "bold"
    },
    unitCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    hideValue: false,
    hideUnit: false,
    hideLabel: false,
    hideBg: true,
    conditionData: []
  },
  {
    id: "LabelValue_737794688501654914451288",
    position: "vertical",
    labelText: "label",
    valueText: "value",
    unitText: "\u2103",
    rotate: 0,
    dataKey: "key-30-1",
    labelX: 209,
    labelY: 221,
    labelCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    valueCssProps: {
      color: "#f5b83c",
      "font-family": "inhert",
      "font-size": "14px"
    },
    unitCssProps: {
      color: "#f5b83c",
      "font-family": "inhert",
      "font-size": "14px"
    },
    hideValue: false,
    hideUnit: false,
    hideLabel: true,
    hideBg: false,
    conditionData: []
  },
  {
    id: "LabelValue_266955549511654914596233",
    position: "vertical",
    labelText: "label",
    valueText: "value",
    unitText: "\u2103",
    rotate: 0,
    dataKey: "key-30-2",
    labelX: 589,
    labelY: 221,
    labelCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    valueCssProps: {
      color: "#f5b83c",
      "font-family": "inhert",
      "font-size": "14px"
    },
    unitCssProps: {
      color: "#f5b83c",
      "font-family": "inhert",
      "font-size": "14px"
    },
    hideValue: false,
    hideUnit: false,
    hideLabel: true,
    hideBg: false,
    conditionData: []
  },
  {
    id: "LabelValue_34160368521654914664672",
    position: "vertical",
    labelText: "label",
    valueText: "value",
    unitText: "\u2103",
    rotate: 0,
    dataKey: "key-32-1",
    labelX: 323,
    labelY: 558,
    labelCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    valueCssProps: {
      color: "#fd8358",
      "font-family": "inhert",
      "font-size": "14px"
    },
    unitCssProps: {
      color: "#fd8358",
      "font-family": "inhert",
      "font-size": "14px"
    },
    hideValue: false,
    hideUnit: false,
    hideLabel: true,
    hideBg: false,
    conditionData: []
  },
  {
    id: "LabelValue_346654782531654914723162",
    position: "vertical",
    labelText: "label",
    valueText: "value",
    unitText: "\u2103",
    rotate: 90,
    dataKey: "key-7-1",
    labelX: 556,
    labelY: 595,
    labelCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    valueCssProps: {
      color: "#4b8bf4",
      "font-family": "inhert",
      "font-size": "14px"
    },
    unitCssProps: {
      color: "#4b8bf4",
      "font-family": "inhert",
      "font-size": "14px"
    },
    hideValue: false,
    hideUnit: false,
    hideLabel: true,
    hideBg: false,
    conditionData: []
  },
  {
    id: "LabelValue_902788724541654914873916",
    position: "vertical",
    labelText: "label",
    valueText: "value",
    unitText: "\u2103",
    rotate: 0,
    dataKey: "key-12-1",
    labelX: 883,
    labelY: 432,
    labelCssProps: {
      "font-size": "14px",
      color: "#7B879A"
    },
    valueCssProps: {
      color: "#39c9e1",
      "font-family": "inhert",
      "font-size": "14px"
    },
    unitCssProps: {
      color: "#39c9e1",
      "font-family": "inhert",
      "font-size": "14px"
    },
    hideValue: false,
    hideUnit: false,
    hideLabel: true,
    hideBg: false,
    conditionData: []
  }
];
var example4 = {
  scaleFactor,
  connectIds,
  compData
};
var ConfigurationMode;
(function(ConfigurationMode2) {
  ConfigurationMode2[ConfigurationMode2["Editor"] = 0] = "Editor";
  ConfigurationMode2[ConfigurationMode2["Apply"] = 1] = "Apply";
})(ConfigurationMode || (ConfigurationMode = {}));
var ConfigurationType;
(function(ConfigurationType2) {
  ConfigurationType2["PipePath"] = "PipePath";
  ConfigurationType2["DeviceImage"] = "DeviceImage";
  ConfigurationType2["DeviceSvg"] = "DeviceSvg";
  ConfigurationType2["LabelValue"] = "LabelValue";
  ConfigurationType2["FlowPath"] = "FlowPath";
})(ConfigurationType || (ConfigurationType = {}));
const RootCommonKey = Symbol();
var testImgSrc = "";
const SvgDetail = {
  RefrigerationUnit: {
    width: 98,
    factor: 98 / 69,
    connectPosition: [
      [0.33, 0.1],
      [0.11, 0.8],
      [0.98, 0.54],
      [0.98, 0.8]
    ]
  },
  Meter: {
    width: 13,
    factor: 13 / 16,
    connectPosition: [
      [0.5, 0.9]
    ]
  },
  WaterTank: {
    width: 43,
    factor: 43 / 46,
    connectPosition: [[0.96, 0.06]]
  },
  CoolingTower: {
    width: 62,
    factor: 62 / 63,
    connectPosition: [
      [0.5, 0],
      [0.1, 0.99],
      [0.5, 0.99],
      [0.9, 0.99],
      [1, 0.5],
      [0, 0.5]
    ]
  },
  CoolingWaterPump: {
    width: 72,
    factor: 72 / 51,
    connectPosition: [
      [0.2, 0],
      [0, 0.6]
    ]
  },
  AirConditioningUnit: {
    width: 72,
    factor: 72 / 49,
    connectPosition: [
      [0.18, 1],
      [0.82, 1]
    ]
  },
  WaterSeparator: {
    width: 72,
    factor: 72 / 34,
    connectPosition: [
      [0.5, 0],
      [0.25, 1],
      [0.75, 1]
    ]
  },
  WaterConcentrator: {
    width: 72,
    factor: 72 / 34,
    connectPosition: [
      [0.5, 0],
      [0.25, 1],
      [0.75, 1]
    ]
  },
  Valve: {
    width: 14,
    factor: 14 / 15,
    connectPosition: [
      [0.5, 0.64]
    ]
  },
  AirCooledHeatPump: {
    width: 73,
    factor: 73 / 66,
    connectPosition: [
      [0, 0.5],
      [0.5, 1],
      [0.5, 0],
      [1, 0.5]
    ]
  },
  ClosedWaterTank: {
    width: 53,
    factor: 1,
    connectPosition: [
      [0, 0.5],
      [0.5, 1],
      [0.5, 0],
      [1, 0.5]
    ]
  },
  ColdStorageTank: {
    width: 51,
    factor: 51 / 74,
    connectPosition: [
      [0, 0.5],
      [0.5, 1],
      [0.5, 0],
      [1, 0.5]
    ]
  },
  DrainWaterPump: {
    width: 72,
    factor: 72 / 50,
    connectPosition: [
      [0.27, 0.12],
      [1, 0.6]
    ]
  },
  EvaporativeCooling: {
    width: 86,
    factor: 86 / 66,
    connectPosition: [
      [0, 0.5],
      [0.5, 1],
      [0.5, 0],
      [1, 0.5]
    ]
  },
  HeatingHotWaterPump: {
    width: 74,
    factor: 74 / 51,
    connectPosition: [
      [0, 0.6],
      [0.72, 0.11]
    ]
  },
  PressWaterSupply: {
    width: 58,
    factor: 58 / 50,
    connectPosition: [
      [0.06, 0.63],
      [0.91, 0.63],
      [0.5, 1]
    ]
  },
  WaterSoftener: {
    width: 43,
    factor: 43 / 50,
    connectPosition: [[0.2, 0.5]]
  },
  ChilledWaterPump: {
    width: 72,
    factor: 72 / 50,
    connectPosition: [
      [0, 0.6],
      [0.73, 0.12]
    ]
  },
  ColdStoragePump: {
    width: 32,
    factor: 32 / 50,
    connectPosition: [
      [0, 0.82],
      [1, 0.82],
      [0.5, 0.99]
    ]
  }
};
const ImgDetail = {
  test: {
    width: 150,
    factor: 1,
    connectPosition: [
      [0, 0.5],
      [0.5, 1],
      [0.5, 0],
      [1, 0.5]
    ],
    src: testImgSrc
  }
};
var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
var freeGlobal$1 = freeGlobal;
var freeSelf = typeof self == "object" && self && self.Object === Object && self;
var root = freeGlobal$1 || freeSelf || Function("return this")();
var root$1 = root;
var Symbol$1 = root$1.Symbol;
var Symbol$2 = Symbol$1;
var objectProto$c = Object.prototype;
var hasOwnProperty$9 = objectProto$c.hasOwnProperty;
var nativeObjectToString$1 = objectProto$c.toString;
var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : void 0;
function getRawTag(value) {
  var isOwn = hasOwnProperty$9.call(value, symToStringTag$1), tag = value[symToStringTag$1];
  try {
    value[symToStringTag$1] = void 0;
    var unmasked = true;
  } catch (e) {
  }
  var result = nativeObjectToString$1.call(value);
  if (unmasked) {
    if (isOwn) {
      value[symToStringTag$1] = tag;
    } else {
      delete value[symToStringTag$1];
    }
  }
  return result;
}
var objectProto$b = Object.prototype;
var nativeObjectToString = objectProto$b.toString;
function objectToString(value) {
  return nativeObjectToString.call(value);
}
var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : void 0;
function baseGetTag(value) {
  if (value == null) {
    return value === void 0 ? undefinedTag : nullTag;
  }
  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
}
function isObjectLike(value) {
  return value != null && typeof value == "object";
}
var isArray = Array.isArray;
var isArray$1 = isArray;
function isObject(value) {
  var type = typeof value;
  return value != null && (type == "object" || type == "function");
}
var asyncTag = "[object AsyncFunction]", funcTag$2 = "[object Function]", genTag$1 = "[object GeneratorFunction]", proxyTag = "[object Proxy]";
function isFunction(value) {
  if (!isObject(value)) {
    return false;
  }
  var tag = baseGetTag(value);
  return tag == funcTag$2 || tag == genTag$1 || tag == asyncTag || tag == proxyTag;
}
var coreJsData = root$1["__core-js_shared__"];
var coreJsData$1 = coreJsData;
var maskSrcKey = function() {
  var uid = /[^.]+$/.exec(coreJsData$1 && coreJsData$1.keys && coreJsData$1.keys.IE_PROTO || "");
  return uid ? "Symbol(src)_1." + uid : "";
}();
function isMasked(func) {
  return !!maskSrcKey && maskSrcKey in func;
}
var funcProto$1 = Function.prototype;
var funcToString$1 = funcProto$1.toString;
function toSource(func) {
  if (func != null) {
    try {
      return funcToString$1.call(func);
    } catch (e) {
    }
    try {
      return func + "";
    } catch (e) {
    }
  }
  return "";
}
var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
var reIsHostCtor = /^\[object .+?Constructor\]$/;
var funcProto = Function.prototype, objectProto$a = Object.prototype;
var funcToString = funcProto.toString;
var hasOwnProperty$8 = objectProto$a.hasOwnProperty;
var reIsNative = RegExp("^" + funcToString.call(hasOwnProperty$8).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$");
function baseIsNative(value) {
  if (!isObject(value) || isMasked(value)) {
    return false;
  }
  var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
  return pattern.test(toSource(value));
}
function getValue(object, key) {
  return object == null ? void 0 : object[key];
}
function getNative(object, key) {
  var value = getValue(object, key);
  return baseIsNative(value) ? value : void 0;
}
var WeakMap$1 = getNative(root$1, "WeakMap");
var WeakMap$2 = WeakMap$1;
var objectCreate = Object.create;
var baseCreate = function() {
  function object() {
  }
  return function(proto) {
    if (!isObject(proto)) {
      return {};
    }
    if (objectCreate) {
      return objectCreate(proto);
    }
    object.prototype = proto;
    var result = new object();
    object.prototype = void 0;
    return result;
  };
}();
var baseCreate$1 = baseCreate;
function copyArray(source, array) {
  var index2 = -1, length = source.length;
  array || (array = Array(length));
  while (++index2 < length) {
    array[index2] = source[index2];
  }
  return array;
}
var defineProperty = function() {
  try {
    var func = getNative(Object, "defineProperty");
    func({}, "", {});
    return func;
  } catch (e) {
  }
}();
var defineProperty$1 = defineProperty;
function arrayEach(array, iteratee) {
  var index2 = -1, length = array == null ? 0 : array.length;
  while (++index2 < length) {
    if (iteratee(array[index2], index2, array) === false) {
      break;
    }
  }
  return array;
}
var MAX_SAFE_INTEGER$1 = 9007199254740991;
var reIsUint = /^(?:0|[1-9]\d*)$/;
function isIndex(value, length) {
  var type = typeof value;
  length = length == null ? MAX_SAFE_INTEGER$1 : length;
  return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
}
function baseAssignValue(object, key, value) {
  if (key == "__proto__" && defineProperty$1) {
    defineProperty$1(object, key, {
      "configurable": true,
      "enumerable": true,
      "value": value,
      "writable": true
    });
  } else {
    object[key] = value;
  }
}
function eq(value, other) {
  return value === other || value !== value && other !== other;
}
var objectProto$9 = Object.prototype;
var hasOwnProperty$7 = objectProto$9.hasOwnProperty;
function assignValue(object, key, value) {
  var objValue = object[key];
  if (!(hasOwnProperty$7.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) {
    baseAssignValue(object, key, value);
  }
}
function copyObject(source, props, object, customizer) {
  var isNew = !object;
  object || (object = {});
  var index2 = -1, length = props.length;
  while (++index2 < length) {
    var key = props[index2];
    var newValue = customizer ? customizer(object[key], source[key], key, object, source) : void 0;
    if (newValue === void 0) {
      newValue = source[key];
    }
    if (isNew) {
      baseAssignValue(object, key, newValue);
    } else {
      assignValue(object, key, newValue);
    }
  }
  return object;
}
var MAX_SAFE_INTEGER = 9007199254740991;
function isLength(value) {
  return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
}
function isArrayLike(value) {
  return value != null && isLength(value.length) && !isFunction(value);
}
var objectProto$8 = Object.prototype;
function isPrototype(value) {
  var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto$8;
  return value === proto;
}
function baseTimes(n, iteratee) {
  var index2 = -1, result = Array(n);
  while (++index2 < n) {
    result[index2] = iteratee(index2);
  }
  return result;
}
var argsTag$2 = "[object Arguments]";
function baseIsArguments(value) {
  return isObjectLike(value) && baseGetTag(value) == argsTag$2;
}
var objectProto$7 = Object.prototype;
var hasOwnProperty$6 = objectProto$7.hasOwnProperty;
var propertyIsEnumerable$1 = objectProto$7.propertyIsEnumerable;
var isArguments = baseIsArguments(function() {
  return arguments;
}()) ? baseIsArguments : function(value) {
  return isObjectLike(value) && hasOwnProperty$6.call(value, "callee") && !propertyIsEnumerable$1.call(value, "callee");
};
var isArguments$1 = isArguments;
function stubFalse() {
  return false;
}
var freeExports$2 = typeof exports == "object" && exports && !exports.nodeType && exports;
var freeModule$2 = freeExports$2 && typeof module == "object" && module && !module.nodeType && module;
var moduleExports$2 = freeModule$2 && freeModule$2.exports === freeExports$2;
var Buffer$1 = moduleExports$2 ? root$1.Buffer : void 0;
var nativeIsBuffer = Buffer$1 ? Buffer$1.isBuffer : void 0;
var isBuffer = nativeIsBuffer || stubFalse;
var isBuffer$1 = isBuffer;
var argsTag$1 = "[object Arguments]", arrayTag$1 = "[object Array]", boolTag$2 = "[object Boolean]", dateTag$2 = "[object Date]", errorTag$1 = "[object Error]", funcTag$1 = "[object Function]", mapTag$4 = "[object Map]", numberTag$2 = "[object Number]", objectTag$2 = "[object Object]", regexpTag$2 = "[object RegExp]", setTag$4 = "[object Set]", stringTag$2 = "[object String]", weakMapTag$2 = "[object WeakMap]";
var arrayBufferTag$2 = "[object ArrayBuffer]", dataViewTag$3 = "[object DataView]", float32Tag$2 = "[object Float32Array]", float64Tag$2 = "[object Float64Array]", int8Tag$2 = "[object Int8Array]", int16Tag$2 = "[object Int16Array]", int32Tag$2 = "[object Int32Array]", uint8Tag$2 = "[object Uint8Array]", uint8ClampedTag$2 = "[object Uint8ClampedArray]", uint16Tag$2 = "[object Uint16Array]", uint32Tag$2 = "[object Uint32Array]";
var typedArrayTags = {};
typedArrayTags[float32Tag$2] = typedArrayTags[float64Tag$2] = typedArrayTags[int8Tag$2] = typedArrayTags[int16Tag$2] = typedArrayTags[int32Tag$2] = typedArrayTags[uint8Tag$2] = typedArrayTags[uint8ClampedTag$2] = typedArrayTags[uint16Tag$2] = typedArrayTags[uint32Tag$2] = true;
typedArrayTags[argsTag$1] = typedArrayTags[arrayTag$1] = typedArrayTags[arrayBufferTag$2] = typedArrayTags[boolTag$2] = typedArrayTags[dataViewTag$3] = typedArrayTags[dateTag$2] = typedArrayTags[errorTag$1] = typedArrayTags[funcTag$1] = typedArrayTags[mapTag$4] = typedArrayTags[numberTag$2] = typedArrayTags[objectTag$2] = typedArrayTags[regexpTag$2] = typedArrayTags[setTag$4] = typedArrayTags[stringTag$2] = typedArrayTags[weakMapTag$2] = false;
function baseIsTypedArray(value) {
  return isObjectLike(value) && isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
}
function baseUnary(func) {
  return function(value) {
    return func(value);
  };
}
var freeExports$1 = typeof exports == "object" && exports && !exports.nodeType && exports;
var freeModule$1 = freeExports$1 && typeof module == "object" && module && !module.nodeType && module;
var moduleExports$1 = freeModule$1 && freeModule$1.exports === freeExports$1;
var freeProcess = moduleExports$1 && freeGlobal$1.process;
var nodeUtil = function() {
  try {
    var types = freeModule$1 && freeModule$1.require && freeModule$1.require("util").types;
    if (types) {
      return types;
    }
    return freeProcess && freeProcess.binding && freeProcess.binding("util");
  } catch (e) {
  }
}();
var nodeUtil$1 = nodeUtil;
var nodeIsTypedArray = nodeUtil$1 && nodeUtil$1.isTypedArray;
var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
var isTypedArray$1 = isTypedArray;
var objectProto$6 = Object.prototype;
var hasOwnProperty$5 = objectProto$6.hasOwnProperty;
function arrayLikeKeys(value, inherited) {
  var isArr = isArray$1(value), isArg = !isArr && isArguments$1(value), isBuff = !isArr && !isArg && isBuffer$1(value), isType = !isArr && !isArg && !isBuff && isTypedArray$1(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length;
  for (var key in value) {
    if ((inherited || hasOwnProperty$5.call(value, key)) && !(skipIndexes && (key == "length" || isBuff && (key == "offset" || key == "parent") || isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || isIndex(key, length)))) {
      result.push(key);
    }
  }
  return result;
}
function overArg(func, transform) {
  return function(arg) {
    return func(transform(arg));
  };
}
var nativeKeys = overArg(Object.keys, Object);
var nativeKeys$1 = nativeKeys;
var objectProto$5 = Object.prototype;
var hasOwnProperty$4 = objectProto$5.hasOwnProperty;
function baseKeys(object) {
  if (!isPrototype(object)) {
    return nativeKeys$1(object);
  }
  var result = [];
  for (var key in Object(object)) {
    if (hasOwnProperty$4.call(object, key) && key != "constructor") {
      result.push(key);
    }
  }
  return result;
}
function keys(object) {
  return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
}
function nativeKeysIn(object) {
  var result = [];
  if (object != null) {
    for (var key in Object(object)) {
      result.push(key);
    }
  }
  return result;
}
var objectProto$4 = Object.prototype;
var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
function baseKeysIn(object) {
  if (!isObject(object)) {
    return nativeKeysIn(object);
  }
  var isProto = isPrototype(object), result = [];
  for (var key in object) {
    if (!(key == "constructor" && (isProto || !hasOwnProperty$3.call(object, key)))) {
      result.push(key);
    }
  }
  return result;
}
function keysIn(object) {
  return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
}
var nativeCreate = getNative(Object, "create");
var nativeCreate$1 = nativeCreate;
function hashClear() {
  this.__data__ = nativeCreate$1 ? nativeCreate$1(null) : {};
  this.size = 0;
}
function hashDelete(key) {
  var result = this.has(key) && delete this.__data__[key];
  this.size -= result ? 1 : 0;
  return result;
}
var HASH_UNDEFINED$1 = "__lodash_hash_undefined__";
var objectProto$3 = Object.prototype;
var hasOwnProperty$2 = objectProto$3.hasOwnProperty;
function hashGet(key) {
  var data = this.__data__;
  if (nativeCreate$1) {
    var result = data[key];
    return result === HASH_UNDEFINED$1 ? void 0 : result;
  }
  return hasOwnProperty$2.call(data, key) ? data[key] : void 0;
}
var objectProto$2 = Object.prototype;
var hasOwnProperty$1 = objectProto$2.hasOwnProperty;
function hashHas(key) {
  var data = this.__data__;
  return nativeCreate$1 ? data[key] !== void 0 : hasOwnProperty$1.call(data, key);
}
var HASH_UNDEFINED = "__lodash_hash_undefined__";
function hashSet(key, value) {
  var data = this.__data__;
  this.size += this.has(key) ? 0 : 1;
  data[key] = nativeCreate$1 && value === void 0 ? HASH_UNDEFINED : value;
  return this;
}
function Hash(entries) {
  var index2 = -1, length = entries == null ? 0 : entries.length;
  this.clear();
  while (++index2 < length) {
    var entry = entries[index2];
    this.set(entry[0], entry[1]);
  }
}
Hash.prototype.clear = hashClear;
Hash.prototype["delete"] = hashDelete;
Hash.prototype.get = hashGet;
Hash.prototype.has = hashHas;
Hash.prototype.set = hashSet;
function listCacheClear() {
  this.__data__ = [];
  this.size = 0;
}
function assocIndexOf(array, key) {
  var length = array.length;
  while (length--) {
    if (eq(array[length][0], key)) {
      return length;
    }
  }
  return -1;
}
var arrayProto = Array.prototype;
var splice = arrayProto.splice;
function listCacheDelete(key) {
  var data = this.__data__, index2 = assocIndexOf(data, key);
  if (index2 < 0) {
    return false;
  }
  var lastIndex = data.length - 1;
  if (index2 == lastIndex) {
    data.pop();
  } else {
    splice.call(data, index2, 1);
  }
  --this.size;
  return true;
}
function listCacheGet(key) {
  var data = this.__data__, index2 = assocIndexOf(data, key);
  return index2 < 0 ? void 0 : data[index2][1];
}
function listCacheHas(key) {
  return assocIndexOf(this.__data__, key) > -1;
}
function listCacheSet(key, value) {
  var data = this.__data__, index2 = assocIndexOf(data, key);
  if (index2 < 0) {
    ++this.size;
    data.push([key, value]);
  } else {
    data[index2][1] = value;
  }
  return this;
}
function ListCache(entries) {
  var index2 = -1, length = entries == null ? 0 : entries.length;
  this.clear();
  while (++index2 < length) {
    var entry = entries[index2];
    this.set(entry[0], entry[1]);
  }
}
ListCache.prototype.clear = listCacheClear;
ListCache.prototype["delete"] = listCacheDelete;
ListCache.prototype.get = listCacheGet;
ListCache.prototype.has = listCacheHas;
ListCache.prototype.set = listCacheSet;
var Map$1 = getNative(root$1, "Map");
var Map$2 = Map$1;
function mapCacheClear() {
  this.size = 0;
  this.__data__ = {
    "hash": new Hash(),
    "map": new (Map$2 || ListCache)(),
    "string": new Hash()
  };
}
function isKeyable(value) {
  var type = typeof value;
  return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value !== "__proto__" : value === null;
}
function getMapData(map, key) {
  var data = map.__data__;
  return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map;
}
function mapCacheDelete(key) {
  var result = getMapData(this, key)["delete"](key);
  this.size -= result ? 1 : 0;
  return result;
}
function mapCacheGet(key) {
  return getMapData(this, key).get(key);
}
function mapCacheHas(key) {
  return getMapData(this, key).has(key);
}
function mapCacheSet(key, value) {
  var data = getMapData(this, key), size = data.size;
  data.set(key, value);
  this.size += data.size == size ? 0 : 1;
  return this;
}
function MapCache(entries) {
  var index2 = -1, length = entries == null ? 0 : entries.length;
  this.clear();
  while (++index2 < length) {
    var entry = entries[index2];
    this.set(entry[0], entry[1]);
  }
}
MapCache.prototype.clear = mapCacheClear;
MapCache.prototype["delete"] = mapCacheDelete;
MapCache.prototype.get = mapCacheGet;
MapCache.prototype.has = mapCacheHas;
MapCache.prototype.set = mapCacheSet;
function arrayPush(array, values) {
  var index2 = -1, length = values.length, offset = array.length;
  while (++index2 < length) {
    array[offset + index2] = values[index2];
  }
  return array;
}
var getPrototype = overArg(Object.getPrototypeOf, Object);
var getPrototype$1 = getPrototype;
function stackClear() {
  this.__data__ = new ListCache();
  this.size = 0;
}
function stackDelete(key) {
  var data = this.__data__, result = data["delete"](key);
  this.size = data.size;
  return result;
}
function stackGet(key) {
  return this.__data__.get(key);
}
function stackHas(key) {
  return this.__data__.has(key);
}
var LARGE_ARRAY_SIZE = 200;
function stackSet(key, value) {
  var data = this.__data__;
  if (data instanceof ListCache) {
    var pairs = data.__data__;
    if (!Map$2 || pairs.length < LARGE_ARRAY_SIZE - 1) {
      pairs.push([key, value]);
      this.size = ++data.size;
      return this;
    }
    data = this.__data__ = new MapCache(pairs);
  }
  data.set(key, value);
  this.size = data.size;
  return this;
}
function Stack(entries) {
  var data = this.__data__ = new ListCache(entries);
  this.size = data.size;
}
Stack.prototype.clear = stackClear;
Stack.prototype["delete"] = stackDelete;
Stack.prototype.get = stackGet;
Stack.prototype.has = stackHas;
Stack.prototype.set = stackSet;
function baseAssign(object, source) {
  return object && copyObject(source, keys(source), object);
}
function baseAssignIn(object, source) {
  return object && copyObject(source, keysIn(source), object);
}
var freeExports = typeof exports == "object" && exports && !exports.nodeType && exports;
var freeModule = freeExports && typeof module == "object" && module && !module.nodeType && module;
var moduleExports = freeModule && freeModule.exports === freeExports;
var Buffer2 = moduleExports ? root$1.Buffer : void 0, allocUnsafe = Buffer2 ? Buffer2.allocUnsafe : void 0;
function cloneBuffer(buffer, isDeep) {
  if (isDeep) {
    return buffer.slice();
  }
  var length = buffer.length, result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length);
  buffer.copy(result);
  return result;
}
function arrayFilter(array, predicate) {
  var index2 = -1, length = array == null ? 0 : array.length, resIndex = 0, result = [];
  while (++index2 < length) {
    var value = array[index2];
    if (predicate(value, index2, array)) {
      result[resIndex++] = value;
    }
  }
  return result;
}
function stubArray() {
  return [];
}
var objectProto$1 = Object.prototype;
var propertyIsEnumerable = objectProto$1.propertyIsEnumerable;
var nativeGetSymbols$1 = Object.getOwnPropertySymbols;
var getSymbols = !nativeGetSymbols$1 ? stubArray : function(object) {
  if (object == null) {
    return [];
  }
  object = Object(object);
  return arrayFilter(nativeGetSymbols$1(object), function(symbol) {
    return propertyIsEnumerable.call(object, symbol);
  });
};
var getSymbols$1 = getSymbols;
function copySymbols(source, object) {
  return copyObject(source, getSymbols$1(source), object);
}
var nativeGetSymbols = Object.getOwnPropertySymbols;
var getSymbolsIn = !nativeGetSymbols ? stubArray : function(object) {
  var result = [];
  while (object) {
    arrayPush(result, getSymbols$1(object));
    object = getPrototype$1(object);
  }
  return result;
};
var getSymbolsIn$1 = getSymbolsIn;
function copySymbolsIn(source, object) {
  return copyObject(source, getSymbolsIn$1(source), object);
}
function baseGetAllKeys(object, keysFunc, symbolsFunc) {
  var result = keysFunc(object);
  return isArray$1(object) ? result : arrayPush(result, symbolsFunc(object));
}
function getAllKeys(object) {
  return baseGetAllKeys(object, keys, getSymbols$1);
}
function getAllKeysIn(object) {
  return baseGetAllKeys(object, keysIn, getSymbolsIn$1);
}
var DataView = getNative(root$1, "DataView");
var DataView$1 = DataView;
var Promise$1 = getNative(root$1, "Promise");
var Promise$2 = Promise$1;
var Set$1 = getNative(root$1, "Set");
var Set$2 = Set$1;
var mapTag$3 = "[object Map]", objectTag$1 = "[object Object]", promiseTag = "[object Promise]", setTag$3 = "[object Set]", weakMapTag$1 = "[object WeakMap]";
var dataViewTag$2 = "[object DataView]";
var dataViewCtorString = toSource(DataView$1), mapCtorString = toSource(Map$2), promiseCtorString = toSource(Promise$2), setCtorString = toSource(Set$2), weakMapCtorString = toSource(WeakMap$2);
var getTag = baseGetTag;
if (DataView$1 && getTag(new DataView$1(new ArrayBuffer(1))) != dataViewTag$2 || Map$2 && getTag(new Map$2()) != mapTag$3 || Promise$2 && getTag(Promise$2.resolve()) != promiseTag || Set$2 && getTag(new Set$2()) != setTag$3 || WeakMap$2 && getTag(new WeakMap$2()) != weakMapTag$1) {
  getTag = function(value) {
    var result = baseGetTag(value), Ctor = result == objectTag$1 ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
    if (ctorString) {
      switch (ctorString) {
        case dataViewCtorString:
          return dataViewTag$2;
        case mapCtorString:
          return mapTag$3;
        case promiseCtorString:
          return promiseTag;
        case setCtorString:
          return setTag$3;
        case weakMapCtorString:
          return weakMapTag$1;
      }
    }
    return result;
  };
}
var getTag$1 = getTag;
var objectProto = Object.prototype;
var hasOwnProperty = objectProto.hasOwnProperty;
function initCloneArray(array) {
  var length = array.length, result = new array.constructor(length);
  if (length && typeof array[0] == "string" && hasOwnProperty.call(array, "index")) {
    result.index = array.index;
    result.input = array.input;
  }
  return result;
}
var Uint8Array2 = root$1.Uint8Array;
var Uint8Array$1 = Uint8Array2;
function cloneArrayBuffer(arrayBuffer) {
  var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
  new Uint8Array$1(result).set(new Uint8Array$1(arrayBuffer));
  return result;
}
function cloneDataView(dataView, isDeep) {
  var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer;
  return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength);
}
var reFlags = /\w*$/;
function cloneRegExp(regexp) {
  var result = new regexp.constructor(regexp.source, reFlags.exec(regexp));
  result.lastIndex = regexp.lastIndex;
  return result;
}
var symbolProto = Symbol$2 ? Symbol$2.prototype : void 0, symbolValueOf = symbolProto ? symbolProto.valueOf : void 0;
function cloneSymbol(symbol) {
  return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {};
}
function cloneTypedArray(typedArray, isDeep) {
  var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
  return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
}
var boolTag$1 = "[object Boolean]", dateTag$1 = "[object Date]", mapTag$2 = "[object Map]", numberTag$1 = "[object Number]", regexpTag$1 = "[object RegExp]", setTag$2 = "[object Set]", stringTag$1 = "[object String]", symbolTag$1 = "[object Symbol]";
var arrayBufferTag$1 = "[object ArrayBuffer]", dataViewTag$1 = "[object DataView]", float32Tag$1 = "[object Float32Array]", float64Tag$1 = "[object Float64Array]", int8Tag$1 = "[object Int8Array]", int16Tag$1 = "[object Int16Array]", int32Tag$1 = "[object Int32Array]", uint8Tag$1 = "[object Uint8Array]", uint8ClampedTag$1 = "[object Uint8ClampedArray]", uint16Tag$1 = "[object Uint16Array]", uint32Tag$1 = "[object Uint32Array]";
function initCloneByTag(object, tag, isDeep) {
  var Ctor = object.constructor;
  switch (tag) {
    case arrayBufferTag$1:
      return cloneArrayBuffer(object);
    case boolTag$1:
    case dateTag$1:
      return new Ctor(+object);
    case dataViewTag$1:
      return cloneDataView(object, isDeep);
    case float32Tag$1:
    case float64Tag$1:
    case int8Tag$1:
    case int16Tag$1:
    case int32Tag$1:
    case uint8Tag$1:
    case uint8ClampedTag$1:
    case uint16Tag$1:
    case uint32Tag$1:
      return cloneTypedArray(object, isDeep);
    case mapTag$2:
      return new Ctor();
    case numberTag$1:
    case stringTag$1:
      return new Ctor(object);
    case regexpTag$1:
      return cloneRegExp(object);
    case setTag$2:
      return new Ctor();
    case symbolTag$1:
      return cloneSymbol(object);
  }
}
function initCloneObject(object) {
  return typeof object.constructor == "function" && !isPrototype(object) ? baseCreate$1(getPrototype$1(object)) : {};
}
var mapTag$1 = "[object Map]";
function baseIsMap(value) {
  return isObjectLike(value) && getTag$1(value) == mapTag$1;
}
var nodeIsMap = nodeUtil$1 && nodeUtil$1.isMap;
var isMap = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap;
var isMap$1 = isMap;
var setTag$1 = "[object Set]";
function baseIsSet(value) {
  return isObjectLike(value) && getTag$1(value) == setTag$1;
}
var nodeIsSet = nodeUtil$1 && nodeUtil$1.isSet;
var isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;
var isSet$1 = isSet;
var CLONE_DEEP_FLAG$1 = 1, CLONE_FLAT_FLAG = 2, CLONE_SYMBOLS_FLAG$1 = 4;
var argsTag = "[object Arguments]", arrayTag = "[object Array]", boolTag = "[object Boolean]", dateTag = "[object Date]", errorTag = "[object Error]", funcTag = "[object Function]", genTag = "[object GeneratorFunction]", mapTag = "[object Map]", numberTag = "[object Number]", objectTag = "[object Object]", regexpTag = "[object RegExp]", setTag = "[object Set]", stringTag = "[object String]", symbolTag = "[object Symbol]", weakMapTag = "[object WeakMap]";
var arrayBufferTag = "[object ArrayBuffer]", dataViewTag = "[object DataView]", float32Tag = "[object Float32Array]", float64Tag = "[object Float64Array]", int8Tag = "[object Int8Array]", int16Tag = "[object Int16Array]", int32Tag = "[object Int32Array]", uint8Tag = "[object Uint8Array]", uint8ClampedTag = "[object Uint8ClampedArray]", uint16Tag = "[object Uint16Array]", uint32Tag = "[object Uint32Array]";
var cloneableTags = {};
cloneableTags[argsTag] = cloneableTags[arrayTag] = cloneableTags[arrayBufferTag] = cloneableTags[dataViewTag] = cloneableTags[boolTag] = cloneableTags[dateTag] = cloneableTags[float32Tag] = cloneableTags[float64Tag] = cloneableTags[int8Tag] = cloneableTags[int16Tag] = cloneableTags[int32Tag] = cloneableTags[mapTag] = cloneableTags[numberTag] = cloneableTags[objectTag] = cloneableTags[regexpTag] = cloneableTags[setTag] = cloneableTags[stringTag] = cloneableTags[symbolTag] = cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] = cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true;
cloneableTags[errorTag] = cloneableTags[funcTag] = cloneableTags[weakMapTag] = false;
function baseClone(value, bitmask, customizer, key, object, stack) {
  var result, isDeep = bitmask & CLONE_DEEP_FLAG$1, isFlat = bitmask & CLONE_FLAT_FLAG, isFull = bitmask & CLONE_SYMBOLS_FLAG$1;
  if (customizer) {
    result = object ? customizer(value, key, object, stack) : customizer(value);
  }
  if (result !== void 0) {
    return result;
  }
  if (!isObject(value)) {
    return value;
  }
  var isArr = isArray$1(value);
  if (isArr) {
    result = initCloneArray(value);
    if (!isDeep) {
      return copyArray(value, result);
    }
  } else {
    var tag = getTag$1(value), isFunc = tag == funcTag || tag == genTag;
    if (isBuffer$1(value)) {
      return cloneBuffer(value, isDeep);
    }
    if (tag == objectTag || tag == argsTag || isFunc && !object) {
      result = isFlat || isFunc ? {} : initCloneObject(value);
      if (!isDeep) {
        return isFlat ? copySymbolsIn(value, baseAssignIn(result, value)) : copySymbols(value, baseAssign(result, value));
      }
    } else {
      if (!cloneableTags[tag]) {
        return object ? value : {};
      }
      result = initCloneByTag(value, tag, isDeep);
    }
  }
  stack || (stack = new Stack());
  var stacked = stack.get(value);
  if (stacked) {
    return stacked;
  }
  stack.set(value, result);
  if (isSet$1(value)) {
    value.forEach(function(subValue) {
      result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack));
    });
  } else if (isMap$1(value)) {
    value.forEach(function(subValue, key2) {
      result.set(key2, baseClone(subValue, bitmask, customizer, key2, value, stack));
    });
  }
  var keysFunc = isFull ? isFlat ? getAllKeysIn : getAllKeys : isFlat ? keysIn : keys;
  var props = isArr ? void 0 : keysFunc(value);
  arrayEach(props || value, function(subValue, key2) {
    if (props) {
      key2 = subValue;
      subValue = value[key2];
    }
    assignValue(result, key2, baseClone(subValue, bitmask, customizer, key2, value, stack));
  });
  return result;
}
var CLONE_DEEP_FLAG = 1, CLONE_SYMBOLS_FLAG = 4;
function cloneDeep(value) {
  return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
}
function useData() {
  const {
    deviceSvgData,
    deviceImageData,
    pipePathData,
    labelValueData,
    compInstance,
    connection,
    scaleFactor: scaleFactor2,
    flowPathData
  } = inject(RootCommonKey);
  function clearData() {
    deviceImageData.value = [];
    deviceSvgData.value = [];
    pipePathData.value = [];
    labelValueData.value = [];
    flowPathData.value = [];
    connection.clear();
    for (const key in compInstance) {
      delete compInstance[key];
    }
  }
  function exportData() {
    const data = [];
    const all = deviceSvgData.value.concat(deviceImageData.value).concat(pipePathData.value).concat(labelValueData.value).concat(flowPathData.value);
    all.forEach((el) => {
      const ins = compInstance[el.id];
      if (ins) {
        data.push(ins.toJSON());
      }
    });
    const connData = connection.getData();
    const connectIds2 = {};
    for (let id in connData) {
      if (id.startsWith(ConfigurationType.DeviceImage) || id.startsWith(ConfigurationType.DeviceSvg) || id.startsWith(ConfigurationType.FlowPath)) {
        const subIds = [];
        connData[id].forEach((el) => {
          var _a2;
          subIds.push({
            id: el.id,
            position: ((_a2 = el.extra) == null ? void 0 : _a2.connectPositionIndex) || 0
          });
        });
        connectIds2[id] = subIds;
      }
    }
    const json = {
      scaleFactor: scaleFactor2.value,
      connectIds: connectIds2,
      compData: data
    };
    console.log(JSON.stringify(json));
  }
  async function importData(data) {
    data = cloneDeep(data);
    scaleFactor2.value = 1;
    clearData();
    await nextTick();
    const _deviceSvgData = [];
    const _deviceImageData = [];
    const _pipePathData = [];
    const _labelValueData = [];
    const _flowPathData = [];
    const idJSON = {};
    const compData2 = data.compData;
    compData2.forEach((el) => {
      if (el.id.startsWith(ConfigurationType.DeviceImage) || el.id.startsWith(ConfigurationType.DeviceSvg)) {
        const deviceEl = el;
        const newEl = {
          id: el.id,
          centerX: deviceEl.x + deviceEl.width / 2,
          centerY: deviceEl.y + deviceEl.width / 2,
          initWidth: deviceEl.width
        };
        if (el.id.startsWith(ConfigurationType.DeviceImage)) {
          newEl.imgSrc = deviceEl.imgSrc;
          newEl.imgName = deviceEl.imgName;
          _deviceImageData.push(newEl);
        } else {
          newEl.componentName = deviceEl.componentName;
          newEl.centerY = deviceEl.y + deviceEl.width / SvgDetail[deviceEl.componentName].factor / 2;
          _deviceSvgData.push(newEl);
        }
      } else if (el.id.startsWith(ConfigurationType.LabelValue)) {
        const labelValueEl = el;
        _labelValueData.push({
          id: labelValueEl.id,
          centerX: 0,
          centerY: 0
        });
      } else if (el.id.startsWith(ConfigurationType.PipePath)) {
        const pipePathEl = el;
        _pipePathData.push({
          id: el.id,
          centerX: 0,
          centerY: 0,
          colors: pipePathEl.colors,
          pipePathType: pipePathEl.type
        });
      } else if (el.id.startsWith(ConfigurationType.FlowPath)) {
        const flowPathEl = el;
        _flowPathData.push({
          id: el.id,
          centerX: flowPathEl.x + flowPathEl.width / 2,
          centerY: flowPathEl.y + flowPathEl.height / 2,
          initWidth: flowPathEl.width,
          initHeight: flowPathEl.height,
          flowPathType: flowPathEl.type
        });
      }
      idJSON[el.id] = el;
    });
    deviceImageData.value = _deviceImageData;
    deviceSvgData.value = _deviceSvgData;
    pipePathData.value = _pipePathData;
    labelValueData.value = _labelValueData;
    flowPathData.value = _flowPathData;
    await nextTick();
    const all = deviceSvgData.value.concat(deviceImageData.value).concat(pipePathData.value).concat(labelValueData.value).concat(flowPathData.value);
    all.forEach((el) => {
      const ins = compInstance[el.id];
      if (ins) {
        ins.setJSON(idJSON[el.id]);
      }
    });
    const connectIds2 = data.connectIds;
    for (let deviceId in connectIds2) {
      const subIds = connectIds2[deviceId];
      const ins = compInstance[deviceId];
      if (ins && ins.getDragInfo) {
        const drag = ins.getDragInfo();
        subIds.forEach((subId) => {
          for (let i = 0; i < pipePathData.value.length; i++) {
            const pipePathIns = compInstance[pipePathData.value[i].id];
            if (pipePathIns && pipePathIns.setConnection) {
              const isSuccess = pipePathIns.setConnection(drag, subId);
              if (isSuccess) {
                break;
              }
            }
          }
        });
      }
    }
    scaleFactor2.value = data.scaleFactor;
  }
  return {
    exportData,
    importData,
    clearData
  };
}
const _hoisted_1$n = { class: "vc-absolute vc-inset-0 vc-z-40" };
const _hoisted_2$k = { class: "vc-absolute vc--translate-x-1/2 vc-left-1/2 vc-top-0 vc-py-24" };
const _hoisted_3$f = { class: "vc-bg-white vc-rounded-md" };
const _hoisted_4$b = {
  key: 0,
  class: "vc-font-semibold vc-text-xl vc-py-2 vc-text-center vc-border-gray-300 vc-border-b"
};
const _hoisted_5$8 = {
  key: 1,
  class: "vc-text-right vc-pr-4 vc-pb-4"
};
const _sfc_main$u = /* @__PURE__ */ defineComponent({
  props: {
    title: null,
    visible: { type: Boolean },
    showBtn: { type: Boolean }
  },
  emits: ["update:visible", "ok"],
  setup(__props, { emit: emits }) {
    const props = __props;
    watch(() => props.visible, (v) => {
      if (v) {
        document.body.classList.add("!vc-overflow-hidden");
      } else {
        document.body.classList.remove("!vc-overflow-hidden");
      }
    });
    function clickMask(e) {
      const target = e.target;
      if (target.classList.contains("vc-dialog-mask")) {
        emits("update:visible", false);
      }
    }
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Teleport, { to: "body" }, [
        withDirectives(createElementVNode("div", _hoisted_1$n, [
          createElementVNode("div", {
            class: "vc-dialog-mask vc-h-full vc-w-full vc-bg-black vc-bg-opacity-20 vc-relative vc-overflow-auto",
            onClick: clickMask
          }, [
            createElementVNode("div", _hoisted_2$k, [
              createElementVNode("div", _hoisted_3$f, [
                __props.title ? (openBlock(), createElementBlock("h2", _hoisted_4$b, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
                renderSlot(_ctx.$slots, "default"),
                __props.showBtn ? (openBlock(), createElementBlock("div", _hoisted_5$8, [
                  createElementVNode("button", {
                    class: "vc-btn vc-btn-lg vc-btn-blue",
                    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("ok"))
                  }, "\u786E\u5B9A")
                ])) : createCommentVNode("", true)
              ])
            ])
          ])
        ], 512), [
          [vShow, __props.visible]
        ])
      ]);
    };
  }
});
const _hoisted_1$m = { class: "vc-bg-gray-100 vc-py-2 vc-px-5 vc-flex vc-flex-row vc-items-center vc-shadow vc-relative vc-z-10" };
const _hoisted_2$j = { class: "mr-6" };
const _hoisted_3$e = { class: "vc-absolute vc-top-full vc-left-0 vc-bg-white vc-shadow-md vc-rounded vc-overflow-hidden" };
const _hoisted_4$a = { class: "vc-flex-1 vc-text-right" };
const _hoisted_5$7 = ["onClick"];
const _sfc_main$t = /* @__PURE__ */ defineComponent({
  setup(__props) {
    inject(RootCommonKey);
    const exampleData = {
      example1,
      example2,
      example3,
      example4
    };
    const { clearData, importData, exportData } = useData();
    const title = ref("\u672A\u547D\u540D");
    function titleBlur() {
      if (!title.value) {
        title.value = "\u672A\u547D\u540D";
      }
    }
    function titleFocus(e) {
      const inputEl = e.target;
      inputEl.select();
    }
    const showFileMenu = ref(false);
    const importWinVisible = ref(false);
    function showImportWin() {
      importWinVisible.value = true;
    }
    function viewExample1() {
      location.href = "/vue-configuration/example-apply/index.html";
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$m, [
        createElementVNode("div", _hoisted_2$j, [
          withDirectives(createElementVNode("input", {
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => title.value = $event),
            class: "vc-bg-transparent vc-font-semibold vc-text-lg focus:vc-outline-none vc-w-36 vc-py-2 vc-border-transparent vc-border-b focus:vc-border-blue-700 vc-overflow-hidden vc-overflow-ellipsis vc-whitespace-nowrap",
            onBlur: titleBlur,
            onFocus: titleFocus
          }, null, 544), [
            [vModelText, title.value]
          ])
        ]),
        createElementVNode("div", {
          class: "vc-relative vc-overflow-visible",
          onMouseenter: _cache[2] || (_cache[2] = ($event) => showFileMenu.value = true),
          onMouseleave: _cache[3] || (_cache[3] = ($event) => showFileMenu.value = false)
        }, [
          createElementVNode("div", {
            class: normalizeClass(["vc-px-2 vc-py-1 hover:vc-bg-gray-300 vc-cursor-pointer vc-rounded", { "vc-bg-gray-300": showFileMenu.value }])
          }, " \u6587\u4EF6 ", 2),
          withDirectives(createElementVNode("div", _hoisted_3$e, [
            createElementVNode("div", {
              class: "vc-px-8 vc-py-2 hover:vc-bg-blue-500 hover:vc-text-white vc-cursor-pointer vc-whitespace-nowrap",
              onClick: _cache[1] || (_cache[1] = (...args) => unref(clearData) && unref(clearData)(...args))
            }, " \u6E05\u7A7A "),
            createElementVNode("div", {
              class: "vc-px-8 vc-py-2 hover:vc-bg-blue-500 hover:vc-text-white vc-cursor-pointer vc-whitespace-nowrap",
              onClick: showImportWin
            }, " \u5BFC\u5165 ")
          ], 512), [
            [vShow, showFileMenu.value]
          ])
        ], 32),
        createElementVNode("div", _hoisted_4$a, [
          createElementVNode("button", {
            class: "vc-btn vc-btn-xl vc-btn-blue vc-mr-2",
            onClick: viewExample1
          }, "\u9884\u89C8\u793A\u4F8B1"),
          createElementVNode("button", {
            class: "vc-btn vc-btn-xl vc-btn-blue",
            onClick: _cache[4] || (_cache[4] = (...args) => unref(exportData) && unref(exportData)(...args))
          }, "\u4FDD\u5B58")
        ]),
        createVNode(_sfc_main$u, {
          visible: importWinVisible.value,
          "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => importWinVisible.value = $event),
          title: "\u793A\u4F8B\u6570\u636E"
        }, {
          default: withCtx(() => [
            (openBlock(), createElementBlock(Fragment, null, renderList(exampleData, (el, name) => {
              return createElementVNode("div", {
                key: name,
                class: "vc-py-3 vc-px-8 vc-text-lg hover:vc-bg-blue-500 hover:vc-text-white vc-cursor-pointer",
                onClick: ($event) => {
                  unref(importData)(el);
                  importWinVisible.value = false;
                }
              }, toDisplayString(name), 9, _hoisted_5$7);
            }), 64))
          ]),
          _: 1
        }, 8, ["visible"])
      ]);
    };
  }
});
var PipePathType;
(function(PipePathType2) {
  PipePathType2["flat"] = "flat";
  PipePathType2["pipe"] = "pipe";
})(PipePathType || (PipePathType = {}));
var PipePathSpeed;
(function(PipePathSpeed2) {
  PipePathSpeed2[PipePathSpeed2["slow"] = 0] = "slow";
  PipePathSpeed2[PipePathSpeed2["normal"] = 1] = "normal";
  PipePathSpeed2[PipePathSpeed2["middle"] = 2] = "middle";
  PipePathSpeed2[PipePathSpeed2["fast"] = 3] = "fast";
})(PipePathSpeed || (PipePathSpeed = {}));
const CompCommonKey = Symbol();
var TextPosition;
(function(TextPosition2) {
  TextPosition2["Top"] = "top";
  TextPosition2["Left"] = "left";
  TextPosition2["Bottom"] = "bottom";
  TextPosition2["Right"] = "right";
})(TextPosition || (TextPosition = {}));
var BaseCompType;
(function(BaseCompType2) {
  BaseCompType2["ConfigureIcon"] = "ConfigureIcon";
})(BaseCompType || (BaseCompType = {}));
var FlowPathType;
(function(FlowPathType2) {
  FlowPathType2["Arrow"] = "Arrow";
  FlowPathType2["Diamond"] = "Diamond";
  FlowPathType2["DottedArrow"] = "DottedArrow";
  FlowPathType2["Triangle"] = "Triangle";
})(FlowPathType || (FlowPathType = {}));
var LabelValuePart;
(function(LabelValuePart2) {
  LabelValuePart2["Label"] = "Label";
  LabelValuePart2["Value"] = "Value";
  LabelValuePart2["Unit"] = "Unit";
})(LabelValuePart || (LabelValuePart = {}));
const hexList = [];
for (let i = 0; i <= 15; i++) {
  hexList[i] = i.toString(16);
}
let unique = 0;
function buildShortUUID(prefix = "") {
  const time = Date.now();
  const random = Math.floor(Math.random() * 1e9);
  unique++;
  return prefix + "_" + random + unique + String(time);
}
const DEFAULT_SIZE = 2;
const DEFAULT_LEN = 201;
function getPipeComposeData(size) {
  return [
    {
      strokeWidth: size,
      stroke: "#000000"
    },
    {
      strokeWidth: size * (60 / 64),
      stroke: "#7F7F7F"
    },
    {
      strokeWidth: size * (55 / 64),
      stroke: "#999999"
    },
    {
      strokeWidth: size * (41 / 64),
      stroke: "#B2B2B2"
    },
    {
      strokeWidth: size * (28 / 64),
      stroke: "#CCCCCC"
    },
    {
      strokeWidth: size * (18 / 64),
      stroke: "#E5E5E5"
    },
    {
      strokeWidth: size * (7 / 64),
      stroke: "#FFFFFF"
    }
  ];
}
function usePipePath(options) {
  const { pipeLength, startX, startY } = getStartData(options);
  const points = reactive([
    {
      x: startX,
      y: startY,
      _x: startX / options.scaleFactor,
      _y: startY / options.scaleFactor,
      id: buildShortUUID()
    },
    {
      x: startX + pipeLength,
      y: startY,
      _x: (startX + pipeLength) / options.scaleFactor,
      _y: startY / options.scaleFactor,
      id: buildShortUUID()
    }
  ]);
  const innerPipeSize = ref(2);
  const operSize = ref(10);
  const pipeSize = ref(6);
  const pipeComposeSize = ref(14);
  const d = computed(() => {
    if (points.length <= 1)
      return "";
    let reuslt = [];
    let d2 = "";
    points.forEach((p) => {
      if (p.isParentNode) {
        d2 += "M" + reuslt.join("L");
        reuslt = [];
      }
      reuslt.push(`${p.x} ${p.y}`);
    });
    if (reuslt.length > 1) {
      d2 += "M" + reuslt.join("L");
    }
    return d2;
  });
  function getStartData(options2) {
    let pipeLength2 = options2.pipeLength || DEFAULT_LEN;
    pipeLength2 = pipeLength2 * options2.scaleFactor;
    const { centerX, centerY } = options2;
    let startX2, startY2;
    if (!centerX || !centerY) {
      const centerPoint = {
        x: options2.containerWidth / 2,
        y: options2.containerHeight / 2
      };
      startX2 = centerPoint.x - (pipeLength2 - 1) / 2;
      startY2 = centerPoint.y - (DEFAULT_SIZE - 1) / 2;
    } else {
      startX2 = centerX - (pipeLength2 - 1) / 2;
      startY2 = centerY - (DEFAULT_SIZE - 1) / 2;
    }
    return {
      pipeLength: pipeLength2,
      startX: startX2,
      startY: startY2
    };
  }
  function updateOptions(options2) {
    const { pipeLength: pipeLength2, startX: startX2, startY: startY2 } = getStartData(options2);
    points[0].x = startX2;
    points[0].y = startY2;
    points[1].x = startX2 + pipeLength2;
    points[1].y = startY2;
  }
  const pipeComposeData = ref(getPipeComposeData(pipeComposeSize.value));
  watch(pipeComposeSize, (v) => {
    pipeComposeData.value = getPipeComposeData(v);
  });
  return {
    innerPipeSize,
    operSize,
    pipeSize,
    d,
    points,
    updateOptions,
    outerOpacity: 1,
    pipeComposeSize,
    pipeComposeData
  };
}
function on(el, event, handler, capture = false) {
  if (el && event && handler) {
    el.addEventListener(event, handler, capture);
    return handler;
  }
}
function off(el, event, handler, capture = false) {
  if (el && event && handler) {
    el.removeEventListener(event, handler, capture);
  }
}
function fixOffsetXY(e) {
  let { offsetX, offsetY } = e;
  console.log("fixOffsetXY before========>", offsetX, offsetY);
  let el = e.target;
  let parent;
  if (el.getAttribute("data-type") === BaseCompType.ConfigureIcon) {
    while (el.parentNode && el.parentNode.getAttribute("data-type") === BaseCompType.ConfigureIcon) {
      el = el.parentNode;
    }
    parent = el;
  } else {
    parent = el.offsetParent;
  }
  while (parent) {
    let x, y;
    if (parent instanceof SVGElement) {
      x = Number(parent.getAttribute("x")) || 0;
      y = Number(parent.getAttribute("y")) || 0;
    } else {
      x = parent.offsetLeft;
      y = parent.offsetTop;
    }
    offsetX += x;
    offsetY += y;
    if (parent.tagName.toUpperCase() === "FOREIGNOBJECT") {
      const pNode = parent.parentNode;
      if (pNode && pNode.tagName.toUpperCase() === "G") {
        const dataX = Number(pNode.getAttribute("data-x")) || 0;
        const dataY = Number(pNode.getAttribute("data-y")) || 0;
        if (dataX || dataY) {
          offsetX += dataX;
          offsetY += dataY;
        }
      }
    }
    parent = parent.offsetParent;
  }
  console.log("fixOffsetXY end========>", offsetX, offsetY);
  return {
    offsetX,
    offsetY
  };
}
function getTop(el, pNode) {
  let offset = el.offsetTop;
  const offsetParent = el.offsetParent;
  if (pNode && offsetParent === pNode)
    return offset;
  if (offsetParent !== null) {
    offset += getTop(offsetParent, pNode);
  }
  return offset;
}
function getLeft(el, pNode) {
  let offset = el.offsetLeft;
  const offsetParent = el.offsetParent;
  if (pNode && offsetParent === pNode)
    return offset;
  if (offsetParent != null)
    offset += getLeft(offsetParent, pNode);
  return offset;
}
function getElRelativeXY(el, pNode) {
  return {
    x: getLeft(el, pNode),
    y: getTop(el, pNode)
  };
}
function getRelativeTarget(el) {
  const point = getElRelativeXY(el);
  return {
    element: el,
    offsetX: point.x,
    offsetY: point.y
  };
}
function getXYRelativeToTarget({ element, offsetX, offsetY }, e) {
  return {
    offsetX: e.pageX - offsetX + element.scrollLeft,
    offsetY: e.pageY - offsetY + element.scrollTop
  };
}
function insterAfter(newEl, targetEl) {
  const parent = targetEl.parentNode;
  if (!parent)
    return;
  if (parent.lastChild == targetEl) {
    parent.appendChild(newEl);
  } else {
    parent.insertBefore(newEl, targetEl.nextSibling);
  }
}
function getOffsetXY(startData, e) {
  let offsetXY;
  if (startData.relativeTarget) {
    offsetXY = getXYRelativeToTarget(startData.relativeTarget, e);
  } else {
    offsetXY = fixOffsetXY(e);
  }
  return offsetXY;
}
function useDrag({
  unStopPropagation,
  start,
  move,
  end,
  element,
  relativeElement,
  getRelativeElement
}) {
  if (!element) {
    element = document.body;
  }
  const dragStart = (e, ...args) => {
    if (e.button === 2)
      return;
    if (!unStopPropagation) {
      e.stopPropagation();
    }
    const startData = {
      x: 0,
      y: 0,
      timeStamp: e.timeStamp,
      args
    };
    if (relativeElement) {
      startData.relativeTarget = getRelativeTarget(relativeElement);
    } else if (getRelativeElement) {
      startData.relativeTarget = getRelativeTarget(getRelativeElement());
    } else if (element instanceof HTMLElement) {
      startData.relativeTarget = getRelativeTarget(element);
    }
    let offsetXY = getOffsetXY(startData, e);
    startData.x = offsetXY.offsetX;
    startData.y = offsetXY.offsetY;
    let startResult;
    if (start) {
      startResult = start(startData, e);
    }
    const moveHandler = on(element, "mousemove", (e2) => {
      const { offsetX, offsetY } = getOffsetXY(startData, e2);
      const dx = offsetX - startData.x;
      const dy = offsetY - startData.y;
      move && move({ dx, dy, offsetX, offsetY, startData, startResult }, e2);
    });
    const endHandler = on(element, "mouseup", (e2) => {
      const { offsetX, offsetY } = getOffsetXY(startData, e2);
      const dx = offsetX - startData.x;
      const dy = offsetY - startData.y;
      const useTime = e2.timeStamp - startData.timeStamp;
      end && end({ dx, dy, startData, isClick: dx < 10 && dy < 10 && useTime < 200, startResult }, e2);
      off(element, "mousemove", moveHandler);
      off(element, "mouseup", endHandler);
    });
  };
  return {
    dragStart
  };
}
const _hoisted_1$l = ["data-type", "x", "y", "width", "height"];
const _hoisted_2$i = ["data-type", "width", "height"];
const _hoisted_3$d = ["data-type", "xlink:href"];
const _sfc_main$s = /* @__PURE__ */ defineComponent({
  props: {
    x: null,
    y: null,
    size: null,
    name: { default: "icon-rotate" },
    color: { default: "#333333" },
    cursor: { default: "move" }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("foreignObject", {
        "data-type": unref(BaseCompType).ConfigureIcon,
        x: __props.x,
        y: __props.y,
        width: __props.size,
        height: __props.size,
        style: normalizeStyle({ cursor: __props.cursor })
      }, [
        (openBlock(), createElementBlock("svg", {
          "data-type": unref(BaseCompType).ConfigureIcon,
          width: __props.size,
          height: __props.size
        }, [
          createElementVNode("use", {
            "data-type": unref(BaseCompType).ConfigureIcon,
            "xlink:href": "#" + __props.name,
            style: normalizeStyle({ fill: __props.color })
          }, null, 12, _hoisted_3$d)
        ], 8, _hoisted_2$i))
      ], 12, _hoisted_1$l);
    };
  }
});
const _hoisted_1$k = ["x", "y"];
const _hoisted_2$h = ["x", "y"];
const _sfc_main$r = /* @__PURE__ */ defineComponent({
  props: {
    x: null,
    y: null,
    centerX: null,
    centerY: null,
    cursor: { default: "move" }
  },
  setup(__props) {
    const props = __props;
    const HANDLE_SIZE = 12;
    const HANDLE_RADIUS = 5;
    const HOLDER_SIZE = HANDLE_SIZE + 10;
    const innerCenterX = computed(() => {
      if (props.x !== void 0) {
        return props.x + HANDLE_SIZE / 2;
      }
      return props.centerX;
    });
    const innerCenterY = computed(() => {
      if (props.y !== void 0) {
        return props.y + HANDLE_SIZE / 2;
      }
      return props.centerY;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        createElementVNode("rect", {
          rx: HANDLE_RADIUS,
          ry: HANDLE_RADIUS,
          fill: "#4F80FF",
          x: unref(innerCenterX) - HANDLE_SIZE / 2,
          y: unref(innerCenterY) - HANDLE_SIZE / 2,
          width: HANDLE_SIZE,
          height: HANDLE_SIZE,
          stroke: "rgba(255,255,255,0.8)",
          "stroke-width": "4"
        }, null, 8, _hoisted_1$k),
        createElementVNode("rect", mergeProps({
          rx: "0",
          ry: "0",
          fill: "rgba(0,0,0,0)",
          x: unref(innerCenterX) - HOLDER_SIZE / 2,
          y: unref(innerCenterY) - HOLDER_SIZE / 2,
          width: HOLDER_SIZE,
          height: HOLDER_SIZE,
          "stroke-width": "0",
          style: { cursor: __props.cursor }
        }, _ctx.$attrs), null, 16, _hoisted_2$h)
      ], 64);
    };
  }
});
function calc2pointDistance(p1, p2) {
  const dx = p2.x - p1.x;
  const dy = p2.y - p1.y;
  return Math.sqrt(dx * dx + dy * dy);
}
function getVerticalDitancePointByPoint(p1, p2, p0, distance, isAboveP1P2 = true) {
  if (p1.x === p2.x) {
    return {
      x: isAboveP1P2 ? p1.x + distance : p1.x - distance,
      y: p0.y
    };
  }
  if (p1.y === p2.y) {
    return {
      x: p0.x,
      y: isAboveP1P2 ? p1.y - distance : p1.y + distance
    };
  }
  const k12 = (p2.y - p1.y) / (p2.x - p1.x);
  const k0 = -1 / k12;
  const dx0 = Math.sqrt(Math.pow(distance, 2) / (1 + Math.pow(k0, 2)));
  const px = { x: 0, y: 0 };
  const b0 = p0.y - k0 * p0.x;
  if (p2.y > p1.y) {
    if (isAboveP1P2) {
      px.x = p0.x + dx0;
    } else {
      px.x = p0.x - dx0;
    }
  } else {
    if (isAboveP1P2) {
      px.x = p0.x - dx0;
    } else {
      px.x = p0.x + dx0;
    }
  }
  px.y = px.x * k0 + b0;
  return px;
}
function getRectPointsBy2SideCenterPoint(p1, p2, sideLen) {
  const pr1 = getVerticalDitancePointByPoint(p1, p2, p1, sideLen / 2, true);
  const pr2 = getVerticalDitancePointByPoint(p1, p2, p1, sideLen / 2, false);
  const pr3 = getVerticalDitancePointByPoint(p1, p2, p2, sideLen / 2, true);
  const pr4 = getVerticalDitancePointByPoint(p1, p2, p2, sideLen / 2, false);
  return {
    p1: pr1,
    p2: pr2,
    p3: pr3,
    p4: pr4
  };
}
function isPointInRect(p, p1, p2, p3) {
  let maxX, minX, maxY, minY;
  if (p2.x === p1.x) {
    maxX = Math.max(p1.x, p3.x);
    minX = Math.min(p1.x, p3.x);
    maxY = Math.max(p1.y, p2.y);
    minY = Math.min(p1.y, p2.y);
  } else if (p1.x === p3.x) {
    maxX = Math.max(p1.x, p2.x);
    minX = Math.min(p1.x, p2.x);
    maxY = Math.max(p1.y, p3.y);
    minY = Math.min(p1.y, p3.y);
  }
  if (maxX !== void 0) {
    return p.x >= minX && p.x <= maxX && p.y >= minY && p.y <= maxY;
  }
  const k12 = (p2.y - p1.y) / (p2.x - p1.x);
  const k13 = (p3.y - p1.y) / (p3.x - p1.x);
  const b12 = p1.y - k12 * p1.x;
  const b34 = p3.y - k12 * p3.x;
  const b13 = p1.y - k13 * p1.x;
  const b24 = p2.y - k13 * p2.x;
  const y12 = k12 * p.x + b12;
  const y34 = k12 * p.x + b34;
  const y13 = k13 * p.x + b13;
  const y24 = k13 * p.x + b24;
  return (p.y >= y12 && p.y <= y34 || p.y >= y34 && p.y <= y12) && (p.y >= y13 && p.y <= y24 || p.y >= y24 && p.y <= y13);
}
function isRectIntersect(p1, w1, h1, p2, w2, h2) {
  const aCenterX = p1.x + w1 / 2;
  const aCenterY = p1.y + h1 / 2;
  const bCenterX = p2.x + w2 / 2;
  const bCenterY = p2.y + h2 / 2;
  const radiusX = w1 / 2 + w2 / 2;
  const radiusY = h1 / 2 + h2 / 2;
  return Math.abs(aCenterX - bCenterX) < radiusX && Math.abs(aCenterY - bCenterY) < radiusY;
}
function isLineIntersectRectangle(linePointX1, linePointY1, linePointX2, linePointY2, rectangleLeftTopX, rectangleLeftTopY, rectangleRightBottomX, rectangleRightBottomY) {
  const lineHeight = linePointY1 - linePointY2;
  const lineWidth = linePointX2 - linePointX1;
  const c = linePointX1 * linePointY2 - linePointX2 * linePointY1;
  if (lineHeight * rectangleLeftTopX + lineWidth * rectangleLeftTopY + c >= 0 && lineHeight * rectangleRightBottomX + lineWidth * rectangleRightBottomY + c <= 0 || lineHeight * rectangleLeftTopX + lineWidth * rectangleLeftTopY + c <= 0 && lineHeight * rectangleRightBottomX + lineWidth * rectangleRightBottomY + c >= 0 || lineHeight * rectangleLeftTopX + lineWidth * rectangleRightBottomY + c >= 0 && lineHeight * rectangleRightBottomX + lineWidth * rectangleLeftTopY + c <= 0 || lineHeight * rectangleLeftTopX + lineWidth * rectangleRightBottomY + c <= 0 && lineHeight * rectangleRightBottomX + lineWidth * rectangleLeftTopY + c >= 0) {
    if (rectangleLeftTopX > rectangleRightBottomX) {
      const temp = rectangleLeftTopX;
      rectangleLeftTopX = rectangleRightBottomX;
      rectangleRightBottomX = temp;
    }
    if (rectangleLeftTopY < rectangleRightBottomY) {
      const temp1 = rectangleLeftTopY;
      rectangleLeftTopY = rectangleRightBottomY;
      rectangleRightBottomY = temp1;
    }
    if (linePointX1 < rectangleLeftTopX && linePointX2 < rectangleLeftTopX || linePointX1 > rectangleRightBottomX && linePointX2 > rectangleRightBottomX || linePointY1 > rectangleLeftTopY && linePointY2 > rectangleLeftTopY || linePointY1 < rectangleRightBottomY && linePointY2 < rectangleRightBottomY) {
      return false;
    } else {
      return true;
    }
  } else {
    return false;
  }
}
function getPositiveDeg(deg1, deg2) {
  const d = deg1 - deg2;
  return d > 0 ? d : 360 + d;
}
function getPointDeg(p, p1, p2) {
  const d1 = calc2pointDistance(p1, p);
  const d2 = calc2pointDistance(p2, p);
  let deg1 = Math.acos(Math.abs(p1.x - p.x) / d1);
  deg1 = 180 / Math.PI * deg1;
  let deg2 = Math.acos(Math.abs(p2.x - p.x) / d2);
  deg2 = 180 / Math.PI * deg2;
  const isUp = p1.y <= p.y;
  if (p1.x >= p.x) {
    if (p2.x >= p.x && p2.y <= p.y) {
      return isUp ? getPositiveDeg(deg1, deg2) : 360 - deg1 - deg2;
    }
    if (p2.x >= p.x && p2.y >= p.y) {
      return isUp ? deg1 + deg2 : getPositiveDeg(deg2, deg1);
    }
    if (p2.x <= p.x && p2.y >= p.y) {
      return isUp ? deg1 + 90 + 90 - deg2 : 90 - deg1 + 90 - deg2;
    }
    return isUp ? deg1 + 180 + deg2 : 90 - deg1 + 90 + deg2;
  } else {
    if (p2.x >= p.x && p2.y <= p.y) {
      return isUp ? 90 - deg1 + 90 - deg2 : deg1 + 90 + 90 - deg2;
    }
    if (p2.x >= p.x && p2.y >= p.y) {
      return isUp ? 90 - deg1 + 90 + deg2 : deg1 + 180 + deg2;
    }
    if (p2.x <= p.x && p2.y >= p.y) {
      return isUp ? 360 - deg1 - deg2 : getPositiveDeg(deg1, deg2);
    }
    return isUp ? getPositiveDeg(deg2, deg1) : deg1 + deg2;
  }
}
function degToRadian(deg) {
  return deg / (180 / Math.PI);
}
function radianToDeg(radian) {
  return radian * (180 / Math.PI);
}
function getRotatePoint(p, p1, deg) {
  if (!deg || deg % 360 === 0)
    return p1;
  const d = calc2pointDistance(p, p1);
  let deg1 = Math.acos(Math.abs(p1.x - p.x) / d);
  deg1 = 180 / Math.PI * deg1;
  if (p1.x >= p.x) {
    if (p1.y <= p.y) {
      if (deg <= deg1) {
        let deg2 = deg1 - deg;
        deg2 = degToRadian(deg2);
        const dx = Math.cos(deg2) * d;
        const dy = Math.sin(deg2) * d;
        return { x: p.x + dx, y: p.y - dy };
      } else {
        let ddeg = deg - deg1;
        if (ddeg <= 90) {
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x + dx, y: p.y + dy };
        } else if (ddeg <= 180) {
          ddeg = 180 - ddeg;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x - dx, y: p.y + dy };
        } else if (ddeg <= 270) {
          ddeg = ddeg - 180;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x - dx, y: p.y - dy };
        } else {
          ddeg = 360 - ddeg;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x + dx, y: p.y - dy };
        }
      }
    } else {
      let ddeg = 90 - deg1;
      if (deg <= ddeg) {
        let deg2 = deg + deg1;
        deg2 = degToRadian(deg2);
        const dx = Math.cos(deg2) * d;
        const dy = Math.sin(deg2) * d;
        return { x: p.x + dx, y: p.y + dy };
      } else {
        ddeg = deg - ddeg;
        if (ddeg <= 90) {
          ddeg = 90 - ddeg;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x - dx, y: p.y + dy };
        } else if (ddeg <= 180) {
          ddeg = ddeg - 90;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x - dx, y: p.y - dy };
        } else if (ddeg <= 270) {
          ddeg = 270 - ddeg;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x + dx, y: p.y - dy };
        } else {
          ddeg = ddeg - 270;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x + dx, y: p.y + dy };
        }
      }
    }
  } else {
    if (p1.y <= p.y) {
      let ddeg = 90 - deg1;
      if (deg <= ddeg) {
        let deg2 = deg + deg1;
        deg2 = degToRadian(deg2);
        const dx = Math.cos(deg2) * d;
        const dy = Math.sin(deg2) * d;
        return { x: p.x - dx, y: p.y - dy };
      } else {
        ddeg = deg - ddeg;
        if (ddeg <= 90) {
          ddeg = 90 - ddeg;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x + dx, y: p.y - dy };
        } else if (ddeg <= 180) {
          ddeg = ddeg - 90;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x + dx, y: p.y + dy };
        } else if (ddeg <= 270) {
          ddeg = 270 - ddeg;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x - dx, y: p.y + dy };
        } else {
          ddeg = ddeg - 270;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x - dx, y: p.y - dy };
        }
      }
    } else {
      if (deg <= deg1) {
        let deg2 = deg1 - deg;
        deg2 = degToRadian(deg2);
        const dx = Math.cos(deg2) * d;
        const dy = Math.sin(deg2) * d;
        return { x: p.x - dx, y: p.y + dy };
      } else {
        let ddeg = deg - deg1;
        if (ddeg <= 90) {
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x - dx, y: p.y - dy };
        } else if (ddeg <= 180) {
          ddeg = 180 - ddeg;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x + dx, y: p.y - dy };
        } else if (ddeg <= 270) {
          ddeg = ddeg - 180;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x + dx, y: p.y + dy };
        } else {
          ddeg = 360 - ddeg;
          ddeg = degToRadian(ddeg);
          const dx = Math.cos(ddeg) * d;
          const dy = Math.sin(ddeg) * d;
          return { x: p.x - dx, y: p.y + dy };
        }
      }
    }
  }
}
function getIntersectionByLineAndPoint(p1, line1, p2) {
  if (line1 === null) {
    return {
      x: p1.x,
      y: p2.y
    };
  } else if (line1.k === 0) {
    return {
      x: p2.x,
      y: p1.y
    };
  } else {
    const k2 = -1 / line1.k;
    const b2 = p2.y - k2 * p2.x;
    const targetX = (b2 - line1.b) / (line1.k - k2);
    const targetY = k2 * targetX + b2;
    return {
      x: targetX,
      y: targetY
    };
  }
}
function getAngelByP1P2AndXaxis(p1, p2) {
  const d = calc2pointDistance(p1, p2);
  if (!d)
    return 0;
  const cos = (p2.x - p1.x) / d;
  let radian = Math.acos(cos);
  if (p2.y < p1.y) {
    radian = Math.PI * 2 - radian;
  }
  return radian * (180 / Math.PI);
}
function getDegToXaxis(p1, p2) {
  const d = calc2pointDistance(p1, p2);
  const dx = Math.abs(p1.x - p2.x);
  const cos = dx / d;
  const radian = Math.acos(cos);
  return radianToDeg(radian);
}
function useRotate({
  getRelativeElement,
  centerPoint,
  start,
  move,
  end
}) {
  const rotate = ref(0);
  const { dragStart: rotateStart } = useDrag({
    getRelativeElement,
    start(startData, e) {
      e.preventDefault();
      let startResult = {
        rotate: rotate.value
      };
      if (start) {
        Object.assign(startResult, start(startData, e) || {});
      }
      return startResult;
    },
    move(data, e) {
      const { offsetX, offsetY, startData, startResult } = data;
      const deg = getPointDeg(typeof centerPoint == "function" ? centerPoint() : centerPoint, startData, {
        x: offsetX,
        y: offsetY
      });
      rotate.value = (startResult.rotate + deg) % 360;
      move && move(data, e);
    },
    end(data, e) {
      end && end(data, e);
    }
  });
  return {
    rotateStart,
    rotate
  };
}
function moveP0({ rotatePoints, newPoint, rotate }) {
  const rotateCenterPoint = {
    x: newPoint.x + (rotatePoints[4].x - newPoint.x) / 2,
    y: newPoint.y + (rotatePoints[4].y - newPoint.y) / 2
  };
  const originalPoint = getRotatePoint(rotateCenterPoint, newPoint, 360 - rotate);
  const staticPoint = getRotatePoint(rotateCenterPoint, rotatePoints[4], 360 - rotate);
  let width = staticPoint.x - originalPoint.x;
  let height = staticPoint.y - originalPoint.y;
  if (width >= 0 && height >= 0) {
    return {
      newX: originalPoint.x,
      newY: originalPoint.y,
      newWidth: width,
      newHeight: height
    };
  } else if (width >= 0 && height <= 0) {
    return {
      newX: originalPoint.x,
      newY: staticPoint.y,
      newHeight: -height,
      newWidth: width
    };
  } else if (width <= 0 && height >= 0) {
    return {
      newWidth: -width,
      newX: staticPoint.x,
      newHeight: height,
      newY: originalPoint.y
    };
  } else {
    return {
      newX: staticPoint.x,
      newY: staticPoint.y,
      newWidth: -width,
      newHeight: -height
    };
  }
}
function moveP1({
  rotatePoints,
  newPoint,
  rotate,
  lineP1P5,
  width,
  height
}) {
  const targetPoint = getIntersectionByLineAndPoint(rotatePoints[1], lineP1P5, newPoint);
  const rotateCenterPoint = {
    x: rotatePoints[5].x + (targetPoint.x - rotatePoints[5].x) / 2,
    y: rotatePoints[5].y + (targetPoint.y - rotatePoints[5].y) / 2
  };
  const originalPoint = getRotatePoint(rotateCenterPoint, targetPoint, 360 - rotate);
  const midH = (rotateCenterPoint.y - originalPoint.y) * 2;
  if (midH >= 0) {
    return {
      newHeight: midH,
      newX: originalPoint.x - width / 2,
      newY: originalPoint.y
    };
  } else {
    return {
      newHeight: -midH,
      newX: originalPoint.x - width / 2,
      newY: originalPoint.y - -midH
    };
  }
}
function moveP2({ rotatePoints, newPoint, rotate }) {
  const rotateCenterPoint = {
    x: newPoint.x + (rotatePoints[6].x - newPoint.x) / 2,
    y: newPoint.y + (rotatePoints[6].y - newPoint.y) / 2
  };
  const originalPoint = getRotatePoint(rotateCenterPoint, newPoint, 360 - rotate);
  const staticPoint = getRotatePoint(rotateCenterPoint, rotatePoints[6], 360 - rotate);
  let width = originalPoint.x - staticPoint.x;
  let height = staticPoint.y - originalPoint.y;
  if (width >= 0 && height >= 0) {
    return {
      newX: staticPoint.x,
      newY: originalPoint.y,
      newWidth: width,
      newHeight: height
    };
  } else if (width >= 0 && height <= 0) {
    return {
      newWidth: width,
      newX: staticPoint.x,
      newHeight: -height,
      newY: staticPoint.y
    };
  } else if (width <= 0 && height >= 0) {
    return {
      newWidth: -width,
      newX: originalPoint.x,
      newHeight: height,
      newY: originalPoint.y
    };
  } else {
    return {
      newY: staticPoint.y,
      newWidth: -width,
      newX: originalPoint.x,
      newHeight: -height
    };
  }
}
function moveP3({
  rotatePoints,
  newPoint,
  rotate,
  lineP3P7,
  width,
  height
}) {
  const targetPoint = getIntersectionByLineAndPoint(rotatePoints[3], lineP3P7, newPoint);
  const rotateCenterPoint = {
    x: rotatePoints[7].x + (targetPoint.x - rotatePoints[7].x) / 2,
    y: rotatePoints[7].y + (targetPoint.y - rotatePoints[7].y) / 2
  };
  const originalPoint = getRotatePoint(rotateCenterPoint, targetPoint, 360 - rotate);
  const midW = (originalPoint.x - rotateCenterPoint.x) * 2;
  if (midW >= 0) {
    return {
      newWidth: midW,
      newX: originalPoint.x - midW,
      newY: originalPoint.y - height / 2
    };
  } else {
    return {
      newWidth: -midW,
      newX: originalPoint.x,
      newY: originalPoint.y - height / 2
    };
  }
}
function moveP4({ rotatePoints, newPoint, rotate }) {
  const rotateCenterPoint = {
    x: rotatePoints[0].x + (newPoint.x - rotatePoints[0].x) / 2,
    y: rotatePoints[0].y + (newPoint.y - rotatePoints[0].y) / 2
  };
  const originalPoint = getRotatePoint(rotateCenterPoint, newPoint, 360 - rotate);
  const staticPoint = getRotatePoint(rotateCenterPoint, rotatePoints[0], 360 - rotate);
  let width = originalPoint.x - staticPoint.x;
  let height = originalPoint.y - staticPoint.y;
  if (width >= 0 && height >= 0) {
    return {
      newX: staticPoint.x,
      newY: staticPoint.y,
      newWidth: width,
      newHeight: height
    };
  } else if (width >= 0 && height <= 0) {
    return {
      newWidth: width,
      newX: staticPoint.x,
      newHeight: -height,
      newY: staticPoint.y - -height
    };
  } else if (width <= 0 && height >= 0) {
    return {
      newWidth: -width,
      newX: staticPoint.x - -width,
      newHeight: height,
      newY: staticPoint.y
    };
  } else {
    return {
      newY: originalPoint.y,
      newWidth: -width,
      newX: originalPoint.x,
      newHeight: -height
    };
  }
}
function moveP5({
  rotatePoints,
  newPoint,
  rotate,
  lineP1P5,
  width,
  height
}) {
  const targetPoint = getIntersectionByLineAndPoint(rotatePoints[1], lineP1P5, newPoint);
  const rotateCenterPoint = {
    x: rotatePoints[1].x + (targetPoint.x - rotatePoints[1].x) / 2,
    y: rotatePoints[1].y + (targetPoint.y - rotatePoints[1].y) / 2
  };
  const originalPoint = getRotatePoint(rotateCenterPoint, targetPoint, 360 - rotate);
  const midH = (originalPoint.y - rotateCenterPoint.y) * 2;
  if (midH >= 0) {
    return {
      newHeight: midH,
      newY: rotateCenterPoint.y - midH / 2
    };
  } else {
    return {
      newHeight: -midH,
      newY: rotateCenterPoint.y - -midH / 2
    };
  }
}
function moveP6({ rotatePoints, newPoint, rotate }) {
  const rotateCenterPoint = {
    x: newPoint.x + (rotatePoints[2].x - newPoint.x) / 2,
    y: newPoint.y + (rotatePoints[2].y - newPoint.y) / 2
  };
  const originalPoint = getRotatePoint(rotateCenterPoint, newPoint, 360 - rotate);
  const staticPoint = getRotatePoint(rotateCenterPoint, rotatePoints[2], 360 - rotate);
  let width = staticPoint.x - originalPoint.x;
  let height = originalPoint.y - staticPoint.y;
  if (width >= 0 && height >= 0) {
    return {
      newX: originalPoint.x,
      newY: staticPoint.y,
      newWidth: width,
      newHeight: height
    };
  } else if (width >= 0 && height <= 0) {
    return {
      newX: originalPoint.x,
      newY: originalPoint.y,
      newHeight: -height,
      newWidth: width
    };
  } else if (width <= 0 && height >= 0) {
    return {
      newWidth: -width,
      newX: staticPoint.x,
      newHeight: height,
      newY: staticPoint.y
    };
  } else {
    return {
      newX: originalPoint.x - -width,
      newY: originalPoint.y,
      newWidth: -width,
      newHeight: -height
    };
  }
}
function moveP7({
  rotatePoints,
  newPoint,
  rotate,
  lineP3P7,
  width,
  height
}) {
  const targetPoint = getIntersectionByLineAndPoint(rotatePoints[3], lineP3P7, newPoint);
  const rotateCenterPoint = {
    x: rotatePoints[3].x + (targetPoint.x - rotatePoints[3].x) / 2,
    y: rotatePoints[3].y + (targetPoint.y - rotatePoints[3].y) / 2
  };
  const originalPoint = getRotatePoint(rotateCenterPoint, targetPoint, 360 - rotate);
  const midW = (rotateCenterPoint.x - originalPoint.x) * 2;
  if (midW >= 0) {
    return {
      newWidth: midW,
      newX: originalPoint.x,
      newY: originalPoint.y - height / 2
    };
  } else {
    return {
      newWidth: -midW,
      newX: originalPoint.x - -midW,
      newY: originalPoint.y - height / 2
    };
  }
}
const movePointHandlers = {
  0: moveP0,
  1: moveP1,
  2: moveP2,
  3: moveP3,
  4: moveP4,
  5: moveP5,
  6: moveP6,
  7: moveP7
};
function useRectDrag({
  element,
  x,
  y,
  width,
  height,
  points,
  rotate,
  move
}) {
  if (!element) {
    return {
      rectDragStart: void 0
    };
  }
  const { dragStart: rectDragStart } = useDrag({
    element,
    start() {
      const clonePoints = cloneDeep(points.value);
      const rotatePoints = clonePoints.map((p1) => {
        return getRotatePoint({
          x: clonePoints[1].x,
          y: clonePoints[3].y
        }, p1, rotate.value);
      });
      let lineP1P5 = null;
      if (rotatePoints[1].x !== rotatePoints[5].x) {
        const k = (rotatePoints[1].y - rotatePoints[5].y) / (rotatePoints[1].x - rotatePoints[5].x);
        const b = rotatePoints[1].y - k * rotatePoints[1].x;
        lineP1P5 = {
          k,
          b
        };
      }
      let lineP3P7 = null;
      if (rotatePoints[3].x !== rotatePoints[7].x) {
        const k = (rotatePoints[3].y - rotatePoints[7].y) / (rotatePoints[3].x - rotatePoints[7].x);
        const b = rotatePoints[3].y - k * rotatePoints[3].x;
        lineP3P7 = {
          k,
          b
        };
      }
      return {
        x: x.value,
        y: y.value,
        width: width.value,
        height: height.value,
        points: clonePoints,
        rotatePoints,
        lineP1P5,
        lineP3P7
      };
    },
    move({ dx, dy, startData, startResult }) {
      const index2 = startData.args[0];
      const rotatePoints = startResult.rotatePoints;
      const newPoint = { x: rotatePoints[index2].x + dx, y: rotatePoints[index2].y + dy };
      const moveOptions = {
        rotatePoints,
        newPoint,
        rotate: rotate.value,
        lineP1P5: startResult.lineP1P5,
        lineP3P7: startResult.lineP3P7,
        width: startResult.width,
        height: startResult.height
      };
      let moveResult = null;
      const moveHandler = movePointHandlers[index2];
      if (moveHandler) {
        moveResult = moveHandler(moveOptions);
      }
      if (moveResult) {
        moveResult.newX !== void 0 && (x.value = moveResult.newX);
        moveResult.newY !== void 0 && (y.value = moveResult.newY);
        moveResult.newWidth !== void 0 && (width.value = moveResult.newWidth);
        moveResult.newHeight !== void 0 && (height.value = moveResult.newHeight);
      }
      move();
    }
  });
  return {
    rectDragStart
  };
}
function useConnEffect({
  getConnectPoints,
  getDraggingRect,
  setDragInfo
}) {
  const curConnectPoint = ref(null);
  let connectPoints = null;
  const opacity = ref(1);
  function mouseover() {
    if (getDraggingRect()) {
      opacity.value = 0.6;
      connectPoints = getConnectPoints();
    }
  }
  function mouseout() {
    if (getDraggingRect()) {
      opacity.value = 1;
      curConnectPoint.value = null;
      connectPoints = null;
    }
  }
  function mousemove() {
    const rect = getDraggingRect();
    if (rect && connectPoints) {
      let targetPoint = null;
      let d;
      connectPoints.forEach((p, i) => {
        const distance = calc2pointDistance(rect, p);
        if (!d || d > distance) {
          d = distance;
          targetPoint = p;
        }
      });
      if (targetPoint) {
        curConnectPoint.value = targetPoint;
      }
    }
  }
  function mouseup() {
    const rect = getDraggingRect();
    if (rect && connectPoints) {
      let d;
      let targetPoint = null;
      let connectPositionIndex = 0;
      connectPoints.forEach((p, i) => {
        const distance = calc2pointDistance(rect, p);
        if (!d || d > distance) {
          d = distance;
          targetPoint = p;
          connectPositionIndex = i;
        }
      });
      if (targetPoint) {
        rect.x = targetPoint.x;
        rect.y = targetPoint.y;
        setDragInfo(connectPositionIndex);
      }
      opacity.value = 1;
      curConnectPoint.value = null;
      connectPoints = null;
    }
  }
  return {
    mouseover,
    mouseout,
    mousemove,
    mouseup,
    curConnectPoint,
    opacity
  };
}
const _hoisted_1$j = ["x", "y", "width", "height"];
const _hoisted_2$g = ["contenteditable"];
const _sfc_main$q = /* @__PURE__ */ defineComponent({
  props: {
    x: null,
    y: null,
    width: { default: 0 },
    height: { default: 0 },
    editable: { type: Boolean, default: void 0 },
    fontSize: { default: TextFontSzie },
    value: { default: "" },
    stopPropagation: { type: Boolean, default: true },
    readonlyTextClass: { default: "" },
    textStyle: { default: "" },
    textCssProps: null,
    readonly: { type: Boolean }
  },
  emits: ["update:value", "update:width", "update:height", "update:editable", "blur"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const textDiv = shallowRef();
    let isTriggerTextWacth = true;
    watch(() => props.value, (v) => {
      if (!isTriggerTextWacth)
        return;
      setText(v);
    });
    onMounted(() => {
      if (props.value) {
        setText(props.value);
      }
    });
    function mousedown(e) {
      if (props.stopPropagation) {
        e.stopPropagation();
      }
    }
    const innerEditable = ref(props.editable || false);
    watch(() => props.editable, (v) => {
      innerEditable.value = !!v;
    });
    watch(innerEditable, (v) => {
      if (v) {
        nextTick(() => {
          if (textDiv.value) {
            textDiv.value.focus();
          }
        });
      }
    });
    watch([() => props.textStyle, () => props.textCssProps], () => {
      nextTick(() => {
        if (textDiv.value) {
          resize(textDiv.value);
        }
      });
    });
    function blur() {
      if (props.editable === void 0) {
        innerEditable.value = false;
      } else {
        emits("update:editable", false);
      }
      emits("blur");
    }
    function resize(div) {
      emits("update:width", div.offsetWidth);
      emits("update:height", div.offsetHeight);
    }
    function getText() {
      if (textDiv.value) {
        return textDiv.value.innerText;
      }
    }
    function setText(text) {
      if (text) {
        if (textDiv.value) {
          textDiv.value.innerText = text + "";
          resize(textDiv.value);
        }
      }
    }
    function keyup(e) {
      resize(e.target);
      isTriggerTextWacth = false;
      emits("update:value", getText());
      nextTick(() => {
        isTriggerTextWacth = true;
      });
    }
    function startEdit() {
      if (props.readonly)
        return;
      if (props.editable === void 0) {
        innerEditable.value = true;
      } else {
        emits("update:editable", true);
      }
    }
    function transitionend() {
      if (textDiv.value) {
        resize(textDiv.value);
      }
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("foreignObject", {
        x: __props.x,
        y: __props.y,
        width: __props.width,
        height: __props.height,
        style: { "font-size": "0" },
        class: "vc-overflow-visible vc-text-container"
      }, [
        createElementVNode("div", {
          ref: (_value, _refs) => {
            _refs["textDiv"] = _value;
            isRef(textDiv) && (textDiv.value = _value);
          },
          contenteditable: innerEditable.value,
          class: normalizeClass(["vc-whitespace-nowrap vc-inline-block focus:vc-outline-blue vc-rounded-sm vc-transition-all", [innerEditable.value ? "" : __props.readonlyTextClass]]),
          style: normalizeStyle([{ "font-size": __props.fontSize + "px" }, __props.textStyle, __props.textCssProps || {}]),
          onTransitionend: transitionend,
          onDblclick: startEdit,
          onBlur: blur,
          onKeyup: keyup,
          onMousedown: mousedown
        }, null, 46, _hoisted_2$g)
      ], 8, _hoisted_1$j);
    };
  }
});
function __variableDynamicImportRuntime0__$2(path) {
  switch (path) {
    case "./resource/Arrow.vue":
      return import("./Arrow.js");
    case "./resource/Diamond.vue":
      return import("./Diamond.js");
    case "./resource/DottedArrow.vue":
      return import("./DottedArrow.js");
    case "./resource/Triangle.vue":
      return import("./Triangle.js");
    default:
      return new Promise(function(resolve, reject) {
        (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path)));
      });
  }
}
const _hoisted_1$i = ["transform"];
const _hoisted_2$f = ["x", "y", "width", "height"];
const _hoisted_3$c = ["cx", "cy"];
const _hoisted_4$9 = ["x", "y", "width", "height"];
const _sfc_main$p = /* @__PURE__ */ defineComponent({
  props: {
    id: null,
    centerX: null,
    centerY: null,
    initWidth: null,
    initHeight: null,
    scaleFactor: null,
    type: null,
    index: null,
    rotate: null,
    fill: null
  },
  setup(__props, { expose }) {
    const props = __props;
    let compCommon = null;
    let svgInfo = null;
    let isEditor = ref(false);
    if (props.id) {
      compCommon = inject(CompCommonKey);
      svgInfo = compCommon.getSvgInfo();
      isEditor = compCommon.isEditor;
    }
    const component = defineAsyncComponent(() => __variableDynamicImportRuntime0__$2(`./resource/${props.type || FlowPathType.Arrow}.vue`));
    let _x = props.centerX - props.initWidth / 2;
    let _y = props.centerY - props.initHeight / 2;
    let _width = props.initWidth;
    let _height = props.initHeight;
    const x = ref(_x * props.scaleFactor);
    const y = ref(_y * props.scaleFactor);
    const width = ref(_width * props.scaleFactor);
    const height = ref(_height * props.scaleFactor);
    watch([x, y, width, height], ([v1, v2, v3, v4]) => {
      _x = v1 / props.scaleFactor;
      _y = v2 / props.scaleFactor;
      _width = v3 / props.scaleFactor;
      _height = v4 / props.scaleFactor;
    });
    watch(() => props.centerX, (v) => {
      x.value = v - width.value / 2;
    });
    watch(() => props.centerY, (v) => {
      y.value = v - height.value / 2;
    });
    watch(() => props.rotate, (v) => {
      rotate.value = v || 0;
    });
    watch(() => props.scaleFactor, (v) => {
      x.value = _x * v;
      y.value = _y * v;
      width.value = _width * v;
      height.value = _height * v;
    });
    const operCursors = ref([
      "nw-resize",
      "n-resize",
      "ne-resize",
      "w-resize",
      "se-resize",
      "s-resize",
      "sw-resize",
      "w-resize"
    ]);
    const selected = ref(false);
    const points = computed(() => {
      return [
        { x: x.value, y: y.value },
        { x: x.value + width.value / 2, y: y.value },
        { x: x.value + width.value, y: y.value },
        { x: x.value + width.value, y: y.value + height.value / 2 },
        { x: x.value + width.value, y: y.value + height.value },
        { x: x.value + width.value / 2, y: y.value + height.value },
        { x: x.value, y: y.value + height.value },
        { x: x.value, y: y.value + height.value / 2 }
      ];
    });
    onBeforeUnmount(() => {
      if (!compCommon)
        return;
      compCommon.connection.disConnect(props.id);
      if (selected.value) {
        compCommon.toggleSelect({
          type: ConfigurationType.FlowPath,
          selected: false,
          index: props.index
        });
      }
    });
    function select(multiple) {
      if (!compCommon)
        return;
      selected.value = true;
      compCommon.toggleSelect({
        id: props.id,
        multiple,
        type: ConfigurationType.FlowPath,
        selected: true,
        index: props.index,
        unSelect() {
          selected.value = false;
        },
        getFlowPathInfo() {
          return {
            x: x.value,
            y: y.value,
            width: width.value,
            height: height.value,
            rotate: rotate.value,
            setRotate(val) {
              rotate.value = val;
            }
          };
        },
        drag: {
          start,
          move
        }
      });
    }
    function move({ dx, dy, startData }) {
      if (startData) {
        x.value = startData.x + dx;
        y.value = startData.y + dy;
      }
    }
    function start() {
      return {
        x: x.value,
        y: y.value
      };
    }
    let mousedown;
    if (props.id) {
      const { dragStart } = useDrag({
        unStopPropagation: !isEditor.value,
        element: svgInfo ? svgInfo.container : void 0,
        start() {
          const isDragSelect = compCommon.multipleSelect.startTogether(props.id);
          if (!isDragSelect) {
            select(false);
          }
          return {
            x: x.value,
            y: y.value,
            isDragSelect
          };
        },
        move({ dx, dy, startResult }) {
          if (!isEditor.value)
            return;
          if (startResult.isDragSelect) {
            compCommon.multipleSelect.moveTogether({ dx, dy });
          } else {
            x.value = startResult.x + dx;
            y.value = startResult.y + dy;
            compCommon.connection.moveTogether(props.id, {
              connectPoints: getRotateConnectPoints()
            });
          }
        },
        end({ startResult }) {
          if (isEditor.value) {
            if (startResult.isDragSelect) {
              compCommon.multipleSelect.endTogether();
            } else {
              compCommon.connection.endTogether(props.id);
            }
          }
        }
      });
      mousedown = dragStart;
    }
    function getRotateConnectPoints() {
      const connetPoints = [];
      const originalPoints = points.value;
      const centerPoints = {
        x: originalPoints[1].x,
        y: originalPoints[3].y
      };
      originalPoints.forEach((point) => {
        connetPoints.push(getRotatePoint(centerPoints, point, rotate.value));
      });
      return connetPoints;
    }
    function getDragInfo(connectPositionIndex) {
      return {
        id: props.id,
        type: ConfigurationType.FlowPath,
        start,
        move,
        extra: {
          connectPositionIndex
        }
      };
    }
    const { opacity, curConnectPoint, mousemove, mouseout, mouseover, mouseup } = useConnEffect({
      getConnectPoints: getRotateConnectPoints,
      getDraggingRect() {
        return compCommon == null ? void 0 : compCommon.draggingPipePathRect;
      },
      setDragInfo(index2) {
        if (compCommon) {
          compCommon.connectingDevice = getDragInfo(index2);
        }
      }
    });
    const { rotate, rotateStart } = useRotate({
      getRelativeElement() {
        return svgInfo ? svgInfo.container : document.body;
      },
      centerPoint() {
        return {
          x: points.value[1].x,
          y: points.value[3].y
        };
      },
      move() {
        compCommon.connection.moveTogether(props.id, {
          connectPoints: getRotateConnectPoints()
        });
      }
    });
    if (props.rotate !== void 0) {
      rotate.value = props.rotate;
    }
    const { rectDragStart } = useRectDrag({
      x,
      y,
      width,
      height,
      element: svgInfo == null ? void 0 : svgInfo.container,
      rotate,
      points,
      move() {
        compCommon.connection.moveTogether(props.id, {
          connectPoints: getRotateConnectPoints()
        });
      }
    });
    function contextmenu(e, el) {
      if (!compCommon)
        return;
      const arr = [];
      if (compCommon.connection.isConnect(props.id)) {
        arr.push({
          name: "\u89E3\u9664\u8FDE\u63A5",
          handler() {
            compCommon.connection.disConnect(props.id);
          }
        });
      }
      compCommon.showContextmenu(e, {
        data: arr,
        id: props.id,
        element: el
      });
    }
    if (compCommon) {
      watch([x, y, width, height, rotate], ([x2, y2, width2, height2, rotate2]) => {
        compCommon == null ? void 0 : compCommon.updatePanelInfo({
          type: ConfigurationType.FlowPath,
          panelInfo: { x: x2, y: y2, width: width2, height: height2, rotate: rotate2 }
        });
      });
    }
    const textValue = ref("");
    const textHeight = ref(0);
    const textWidth = ref(0);
    const textEditable = ref(false);
    const textX = computed(() => {
      return x.value + width.value / 2 - textWidth.value / 2;
    });
    const textY = computed(() => {
      return y.value + height.value / 2 - textHeight.value / 2;
    });
    function setText() {
      if (!isEditor.value || !props.id)
        return;
      textEditable.value = true;
    }
    const myExpose = {
      isInBoxSelect(boxSelect) {
        const isIn = isRectIntersect({ x: x.value, y: y.value }, width.value, height.value, { x: boxSelect.x, y: boxSelect.y }, boxSelect.width, boxSelect.height);
        return isIn;
      },
      select() {
        select(true);
      },
      toJSON() {
        return {
          id: props.id,
          x: _x,
          y: _y,
          width: _width,
          height: _height,
          type: props.type || FlowPathType.Arrow,
          rotate: rotate.value,
          text: textValue.value
        };
      },
      setJSON(data) {
        rotate.value = data.rotate;
        textValue.value = data.text || "";
      },
      getDragInfo,
      previewCondition() {
      },
      restoreCondition() {
      },
      getOriginalProps() {
      },
      getBox() {
        return {
          x: x.value,
          y: y.value,
          width: width.value,
          height: height.value,
          maxX: x.value + width.value,
          maxY: y.value + height.value
        };
      },
      translate(dx, dy) {
        x.value = x.value + dx;
        y.value = y.value + dy;
      }
    };
    expose(myExpose);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("g", {
        transform: `rotate(${unref(rotate)},${unref(points)[1].x},${unref(points)[3].y})`,
        onContextmenu: _cache[9] || (_cache[9] = ($event) => contextmenu($event, _ctx.$el))
      }, [
        (openBlock(), createBlock(resolveDynamicComponent(unref(component)), {
          points: unref(points),
          class: normalizeClass([unref(isEditor) ? "vc-cursor-move" : "vc-cursor-pointer"]),
          style: normalizeStyle({ opacity: unref(opacity) }),
          fill: __props.fill
        }, null, 8, ["points", "class", "style", "fill"])),
        createVNode(_sfc_main$q, {
          value: textValue.value,
          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => textValue.value = $event),
          width: textWidth.value,
          "onUpdate:width": _cache[1] || (_cache[1] = ($event) => textWidth.value = $event),
          height: textHeight.value,
          "onUpdate:height": _cache[2] || (_cache[2] = ($event) => textHeight.value = $event),
          editable: textEditable.value,
          "onUpdate:editable": _cache[3] || (_cache[3] = ($event) => textEditable.value = $event),
          x: unref(textX),
          y: unref(textY)
        }, null, 8, ["value", "width", "height", "editable", "x", "y"]),
        createElementVNode("rect", {
          x: x.value,
          y: y.value,
          width: width.value,
          height: height.value,
          fill: "rgba(0,0,0,0)",
          stroke: "rgba(0,0,0,0)",
          onMousedown: _cache[4] || (_cache[4] = (...args) => unref(mousedown) && unref(mousedown)(...args)),
          onMouseover: _cache[5] || (_cache[5] = (...args) => unref(mouseover) && unref(mouseover)(...args)),
          onMousemove: _cache[6] || (_cache[6] = (...args) => unref(mousemove) && unref(mousemove)(...args)),
          onMouseout: _cache[7] || (_cache[7] = (...args) => unref(mouseout) && unref(mouseout)(...args)),
          onMouseup: _cache[8] || (_cache[8] = (...args) => unref(mouseup) && unref(mouseup)(...args)),
          onDblclick: setText
        }, null, 40, _hoisted_2$f),
        unref(curConnectPoint) ? (openBlock(), createElementBlock("circle", {
          key: 0,
          cx: unref(curConnectPoint).x,
          cy: unref(curConnectPoint).y,
          r: "6",
          fill: "#4F80FF",
          stroke: "rgba(255,255,255,0.8)",
          "stroke-width": "2"
        }, null, 8, _hoisted_3$c)) : createCommentVNode("", true),
        selected.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
          createElementVNode("rect", {
            x: unref(points)[0].x,
            y: unref(points)[0].y,
            width: width.value,
            height: height.value,
            fill: "none",
            stroke: "#4F80FF",
            "stroke-dasharray": "3 3",
            style: normalizeStyle({ "stroke-width": unref(isEditor) ? 1 : 2 }),
            "pointer-events": "none"
          }, null, 12, _hoisted_4$9),
          unref(isEditor) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(points), (el, i) => {
              return openBlock(), createBlock(_sfc_main$r, {
                key: el.x + "" + el.y + i,
                "center-x": el.x,
                "center-y": el.y,
                cursor: operCursors.value[i],
                onMousedown: ($event) => unref(rectDragStart) ? unref(rectDragStart)($event, i) : void 0
              }, null, 8, ["center-x", "center-y", "cursor", "onMousedown"]);
            }), 128)),
            createVNode(_sfc_main$s, {
              x: unref(points)[1].x - unref(IconSize) / 2,
              y: unref(points)[1].y - unref(FlowPathOperSize) - 5 - unref(IconSize) / 2,
              size: unref(IconSize),
              onMousedown: unref(rotateStart)
            }, null, 8, ["x", "y", "size", "onMousedown"])
          ], 64)) : createCommentVNode("", true)
        ], 64)) : createCommentVNode("", true)
      ], 40, _hoisted_1$i);
    };
  }
});
var MapShim = function() {
  if (typeof Map !== "undefined") {
    return Map;
  }
  function getIndex(arr, key) {
    var result = -1;
    arr.some(function(entry, index2) {
      if (entry[0] === key) {
        result = index2;
        return true;
      }
      return false;
    });
    return result;
  }
  return function() {
    function class_1() {
      this.__entries__ = [];
    }
    Object.defineProperty(class_1.prototype, "size", {
      get: function() {
        return this.__entries__.length;
      },
      enumerable: true,
      configurable: true
    });
    class_1.prototype.get = function(key) {
      var index2 = getIndex(this.__entries__, key);
      var entry = this.__entries__[index2];
      return entry && entry[1];
    };
    class_1.prototype.set = function(key, value) {
      var index2 = getIndex(this.__entries__, key);
      if (~index2) {
        this.__entries__[index2][1] = value;
      } else {
        this.__entries__.push([key, value]);
      }
    };
    class_1.prototype.delete = function(key) {
      var entries = this.__entries__;
      var index2 = getIndex(entries, key);
      if (~index2) {
        entries.splice(index2, 1);
      }
    };
    class_1.prototype.has = function(key) {
      return !!~getIndex(this.__entries__, key);
    };
    class_1.prototype.clear = function() {
      this.__entries__.splice(0);
    };
    class_1.prototype.forEach = function(callback, ctx) {
      if (ctx === void 0) {
        ctx = null;
      }
      for (var _i = 0, _a2 = this.__entries__; _i < _a2.length; _i++) {
        var entry = _a2[_i];
        callback.call(ctx, entry[1], entry[0]);
      }
    };
    return class_1;
  }();
}();
var isBrowser = typeof window !== "undefined" && typeof document !== "undefined" && window.document === document;
var global$1 = function() {
  if (typeof global !== "undefined" && global.Math === Math) {
    return global;
  }
  if (typeof self !== "undefined" && self.Math === Math) {
    return self;
  }
  if (typeof window !== "undefined" && window.Math === Math) {
    return window;
  }
  return Function("return this")();
}();
var requestAnimationFrame$1 = function() {
  if (typeof requestAnimationFrame === "function") {
    return requestAnimationFrame.bind(global$1);
  }
  return function(callback) {
    return setTimeout(function() {
      return callback(Date.now());
    }, 1e3 / 60);
  };
}();
var trailingTimeout = 2;
function throttle(callback, delay) {
  var leadingCall = false, trailingCall = false, lastCallTime = 0;
  function resolvePending() {
    if (leadingCall) {
      leadingCall = false;
      callback();
    }
    if (trailingCall) {
      proxy();
    }
  }
  function timeoutCallback() {
    requestAnimationFrame$1(resolvePending);
  }
  function proxy() {
    var timeStamp = Date.now();
    if (leadingCall) {
      if (timeStamp - lastCallTime < trailingTimeout) {
        return;
      }
      trailingCall = true;
    } else {
      leadingCall = true;
      trailingCall = false;
      setTimeout(timeoutCallback, delay);
    }
    lastCallTime = timeStamp;
  }
  return proxy;
}
var REFRESH_DELAY = 20;
var transitionKeys = ["top", "right", "bottom", "left", "width", "height", "size", "weight"];
var mutationObserverSupported = typeof MutationObserver !== "undefined";
var ResizeObserverController = function() {
  function ResizeObserverController2() {
    this.connected_ = false;
    this.mutationEventsAdded_ = false;
    this.mutationsObserver_ = null;
    this.observers_ = [];
    this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
    this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
  }
  ResizeObserverController2.prototype.addObserver = function(observer) {
    if (!~this.observers_.indexOf(observer)) {
      this.observers_.push(observer);
    }
    if (!this.connected_) {
      this.connect_();
    }
  };
  ResizeObserverController2.prototype.removeObserver = function(observer) {
    var observers2 = this.observers_;
    var index2 = observers2.indexOf(observer);
    if (~index2) {
      observers2.splice(index2, 1);
    }
    if (!observers2.length && this.connected_) {
      this.disconnect_();
    }
  };
  ResizeObserverController2.prototype.refresh = function() {
    var changesDetected = this.updateObservers_();
    if (changesDetected) {
      this.refresh();
    }
  };
  ResizeObserverController2.prototype.updateObservers_ = function() {
    var activeObservers = this.observers_.filter(function(observer) {
      return observer.gatherActive(), observer.hasActive();
    });
    activeObservers.forEach(function(observer) {
      return observer.broadcastActive();
    });
    return activeObservers.length > 0;
  };
  ResizeObserverController2.prototype.connect_ = function() {
    if (!isBrowser || this.connected_) {
      return;
    }
    document.addEventListener("transitionend", this.onTransitionEnd_);
    window.addEventListener("resize", this.refresh);
    if (mutationObserverSupported) {
      this.mutationsObserver_ = new MutationObserver(this.refresh);
      this.mutationsObserver_.observe(document, {
        attributes: true,
        childList: true,
        characterData: true,
        subtree: true
      });
    } else {
      document.addEventListener("DOMSubtreeModified", this.refresh);
      this.mutationEventsAdded_ = true;
    }
    this.connected_ = true;
  };
  ResizeObserverController2.prototype.disconnect_ = function() {
    if (!isBrowser || !this.connected_) {
      return;
    }
    document.removeEventListener("transitionend", this.onTransitionEnd_);
    window.removeEventListener("resize", this.refresh);
    if (this.mutationsObserver_) {
      this.mutationsObserver_.disconnect();
    }
    if (this.mutationEventsAdded_) {
      document.removeEventListener("DOMSubtreeModified", this.refresh);
    }
    this.mutationsObserver_ = null;
    this.mutationEventsAdded_ = false;
    this.connected_ = false;
  };
  ResizeObserverController2.prototype.onTransitionEnd_ = function(_a2) {
    var _b = _a2.propertyName, propertyName = _b === void 0 ? "" : _b;
    var isReflowProperty = transitionKeys.some(function(key) {
      return !!~propertyName.indexOf(key);
    });
    if (isReflowProperty) {
      this.refresh();
    }
  };
  ResizeObserverController2.getInstance = function() {
    if (!this.instance_) {
      this.instance_ = new ResizeObserverController2();
    }
    return this.instance_;
  };
  ResizeObserverController2.instance_ = null;
  return ResizeObserverController2;
}();
var defineConfigurable = function(target, props) {
  for (var _i = 0, _a2 = Object.keys(props); _i < _a2.length; _i++) {
    var key = _a2[_i];
    Object.defineProperty(target, key, {
      value: props[key],
      enumerable: false,
      writable: false,
      configurable: true
    });
  }
  return target;
};
var getWindowOf = function(target) {
  var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
  return ownerGlobal || global$1;
};
var emptyRect = createRectInit(0, 0, 0, 0);
function toFloat(value) {
  return parseFloat(value) || 0;
}
function getBordersSize(styles) {
  var positions = [];
  for (var _i = 1; _i < arguments.length; _i++) {
    positions[_i - 1] = arguments[_i];
  }
  return positions.reduce(function(size, position) {
    var value = styles["border-" + position + "-width"];
    return size + toFloat(value);
  }, 0);
}
function getPaddings(styles) {
  var positions = ["top", "right", "bottom", "left"];
  var paddings = {};
  for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
    var position = positions_1[_i];
    var value = styles["padding-" + position];
    paddings[position] = toFloat(value);
  }
  return paddings;
}
function getSVGContentRect(target) {
  var bbox = target.getBBox();
  return createRectInit(0, 0, bbox.width, bbox.height);
}
function getHTMLElementContentRect(target) {
  var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
  if (!clientWidth && !clientHeight) {
    return emptyRect;
  }
  var styles = getWindowOf(target).getComputedStyle(target);
  var paddings = getPaddings(styles);
  var horizPad = paddings.left + paddings.right;
  var vertPad = paddings.top + paddings.bottom;
  var width = toFloat(styles.width), height = toFloat(styles.height);
  if (styles.boxSizing === "border-box") {
    if (Math.round(width + horizPad) !== clientWidth) {
      width -= getBordersSize(styles, "left", "right") + horizPad;
    }
    if (Math.round(height + vertPad) !== clientHeight) {
      height -= getBordersSize(styles, "top", "bottom") + vertPad;
    }
  }
  if (!isDocumentElement(target)) {
    var vertScrollbar = Math.round(width + horizPad) - clientWidth;
    var horizScrollbar = Math.round(height + vertPad) - clientHeight;
    if (Math.abs(vertScrollbar) !== 1) {
      width -= vertScrollbar;
    }
    if (Math.abs(horizScrollbar) !== 1) {
      height -= horizScrollbar;
    }
  }
  return createRectInit(paddings.left, paddings.top, width, height);
}
var isSVGGraphicsElement = function() {
  if (typeof SVGGraphicsElement !== "undefined") {
    return function(target) {
      return target instanceof getWindowOf(target).SVGGraphicsElement;
    };
  }
  return function(target) {
    return target instanceof getWindowOf(target).SVGElement && typeof target.getBBox === "function";
  };
}();
function isDocumentElement(target) {
  return target === getWindowOf(target).document.documentElement;
}
function getContentRect(target) {
  if (!isBrowser) {
    return emptyRect;
  }
  if (isSVGGraphicsElement(target)) {
    return getSVGContentRect(target);
  }
  return getHTMLElementContentRect(target);
}
function createReadOnlyRect(_a2) {
  var x = _a2.x, y = _a2.y, width = _a2.width, height = _a2.height;
  var Constr = typeof DOMRectReadOnly !== "undefined" ? DOMRectReadOnly : Object;
  var rect = Object.create(Constr.prototype);
  defineConfigurable(rect, {
    x,
    y,
    width,
    height,
    top: y,
    right: x + width,
    bottom: height + y,
    left: x
  });
  return rect;
}
function createRectInit(x, y, width, height) {
  return { x, y, width, height };
}
var ResizeObservation = function() {
  function ResizeObservation2(target) {
    this.broadcastWidth = 0;
    this.broadcastHeight = 0;
    this.contentRect_ = createRectInit(0, 0, 0, 0);
    this.target = target;
  }
  ResizeObservation2.prototype.isActive = function() {
    var rect = getContentRect(this.target);
    this.contentRect_ = rect;
    return rect.width !== this.broadcastWidth || rect.height !== this.broadcastHeight;
  };
  ResizeObservation2.prototype.broadcastRect = function() {
    var rect = this.contentRect_;
    this.broadcastWidth = rect.width;
    this.broadcastHeight = rect.height;
    return rect;
  };
  return ResizeObservation2;
}();
var ResizeObserverEntry = function() {
  function ResizeObserverEntry2(target, rectInit) {
    var contentRect = createReadOnlyRect(rectInit);
    defineConfigurable(this, { target, contentRect });
  }
  return ResizeObserverEntry2;
}();
var ResizeObserverSPI = function() {
  function ResizeObserverSPI2(callback, controller, callbackCtx) {
    this.activeObservations_ = [];
    this.observations_ = new MapShim();
    if (typeof callback !== "function") {
      throw new TypeError("The callback provided as parameter 1 is not a function.");
    }
    this.callback_ = callback;
    this.controller_ = controller;
    this.callbackCtx_ = callbackCtx;
  }
  ResizeObserverSPI2.prototype.observe = function(target) {
    if (!arguments.length) {
      throw new TypeError("1 argument required, but only 0 present.");
    }
    if (typeof Element === "undefined" || !(Element instanceof Object)) {
      return;
    }
    if (!(target instanceof getWindowOf(target).Element)) {
      throw new TypeError('parameter 1 is not of type "Element".');
    }
    var observations = this.observations_;
    if (observations.has(target)) {
      return;
    }
    observations.set(target, new ResizeObservation(target));
    this.controller_.addObserver(this);
    this.controller_.refresh();
  };
  ResizeObserverSPI2.prototype.unobserve = function(target) {
    if (!arguments.length) {
      throw new TypeError("1 argument required, but only 0 present.");
    }
    if (typeof Element === "undefined" || !(Element instanceof Object)) {
      return;
    }
    if (!(target instanceof getWindowOf(target).Element)) {
      throw new TypeError('parameter 1 is not of type "Element".');
    }
    var observations = this.observations_;
    if (!observations.has(target)) {
      return;
    }
    observations.delete(target);
    if (!observations.size) {
      this.controller_.removeObserver(this);
    }
  };
  ResizeObserverSPI2.prototype.disconnect = function() {
    this.clearActive();
    this.observations_.clear();
    this.controller_.removeObserver(this);
  };
  ResizeObserverSPI2.prototype.gatherActive = function() {
    var _this = this;
    this.clearActive();
    this.observations_.forEach(function(observation) {
      if (observation.isActive()) {
        _this.activeObservations_.push(observation);
      }
    });
  };
  ResizeObserverSPI2.prototype.broadcastActive = function() {
    if (!this.hasActive()) {
      return;
    }
    var ctx = this.callbackCtx_;
    var entries = this.activeObservations_.map(function(observation) {
      return new ResizeObserverEntry(observation.target, observation.broadcastRect());
    });
    this.callback_.call(ctx, entries, ctx);
    this.clearActive();
  };
  ResizeObserverSPI2.prototype.clearActive = function() {
    this.activeObservations_.splice(0);
  };
  ResizeObserverSPI2.prototype.hasActive = function() {
    return this.activeObservations_.length > 0;
  };
  return ResizeObserverSPI2;
}();
var observers = typeof WeakMap !== "undefined" ? new WeakMap() : new MapShim();
var ResizeObserver = function() {
  function ResizeObserver2(callback) {
    if (!(this instanceof ResizeObserver2)) {
      throw new TypeError("Cannot call a class as a function.");
    }
    if (!arguments.length) {
      throw new TypeError("1 argument required, but only 0 present.");
    }
    var controller = ResizeObserverController.getInstance();
    var observer = new ResizeObserverSPI(callback, controller, this);
    observers.set(this, observer);
  }
  return ResizeObserver2;
}();
[
  "observe",
  "unobserve",
  "disconnect"
].forEach(function(method) {
  ResizeObserver.prototype[method] = function() {
    var _a2;
    return (_a2 = observers.get(this))[method].apply(_a2, arguments);
  };
});
var index = function() {
  if (typeof global$1.ResizeObserver !== "undefined") {
    return global$1.ResizeObserver;
  }
  return ResizeObserver;
}();
function __variableDynamicImportRuntime0__$1(path) {
  switch (path) {
    case "../components/Device/resource/AirConditioningUnit.vue":
      return import("./AirConditioningUnit.js");
    case "../components/Device/resource/AirCooledHeatPump.vue":
      return import("./AirCooledHeatPump.js");
    case "../components/Device/resource/ChilledWaterPump.vue":
      return import("./ChilledWaterPump.js");
    case "../components/Device/resource/ClosedWaterTank.vue":
      return import("./ClosedWaterTank.js");
    case "../components/Device/resource/ColdStoragePump.vue":
      return import("./ColdStoragePump.js");
    case "../components/Device/resource/ColdStorageTank.vue":
      return import("./ColdStorageTank.js");
    case "../components/Device/resource/ConnectPipe.vue":
      return import("./ConnectPipe.js");
    case "../components/Device/resource/CoolingTower.vue":
      return import("./CoolingTower.js");
    case "../components/Device/resource/CoolingWaterPump.vue":
      return import("./CoolingWaterPump.js");
    case "../components/Device/resource/DrainWaterPump.vue":
      return import("./DrainWaterPump.js");
    case "../components/Device/resource/EvaporativeCooling.vue":
      return import("./EvaporativeCooling.js");
    case "../components/Device/resource/HeatingHotWaterPump.vue":
      return import("./HeatingHotWaterPump.js");
    case "../components/Device/resource/Meter.vue":
      return import("./Meter.js");
    case "../components/Device/resource/Pipe.vue":
      return import("./Pipe.js");
    case "../components/Device/resource/PressWaterSupply.vue":
      return import("./PressWaterSupply.js");
    case "../components/Device/resource/RefrigerationUnit.vue":
      return import("./RefrigerationUnit.js");
    case "../components/Device/resource/Valve.vue":
      return import("./Valve.js");
    case "../components/Device/resource/WaterConcentrator.vue":
      return import("./WaterConcentrator.js");
    case "../components/Device/resource/WaterSeparator.vue":
      return import("./WaterSeparator.js");
    case "../components/Device/resource/WaterSoftener.vue":
      return import("./WaterSoftener.js");
    case "../components/Device/resource/WaterTank.vue":
      return import("./WaterTank.js");
    default:
      return new Promise(function(resolve, reject) {
        (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path)));
      });
  }
}
const _hoisted_1$h = {
  class: "vc-h-full vc-overflow-x-hidden vc-overflow-y-auto vc-w-64 vc-border-solid vc-border-r vc-border-gray-300 vc-select-none",
  draggable: "false"
};
const _hoisted_2$e = /* @__PURE__ */ createElementVNode("div", { class: "vc-bg-blue-500 vc-text-white vc-p-2" }, " \u7BA1\u9053 ", -1);
const _hoisted_3$b = ["onDragstart"];
const _hoisted_4$8 = {
  xmlns: "http://www.w3.org/2000/svg",
  version: "1.1",
  height: "100%",
  width: "100%"
};
const _hoisted_5$6 = ["d", "stroke"];
const _hoisted_6$6 = ["d", "stroke"];
const _hoisted_7$6 = ["d", "stroke"];
const _hoisted_8$5 = /* @__PURE__ */ createElementVNode("div", { class: "vc-bg-blue-500 vc-text-white vc-p-2" }, " \u6D41\u7A0B ", -1);
const _hoisted_9$5 = { class: "vc-flex vc-flex-row vc-flex-wrap vc-items-center vc-pt-2 vc-pl-2" };
const _hoisted_10$4 = ["onDragstart"];
const _hoisted_11$4 = {
  xmlns: "http://www.w3.org/2000/svg",
  version: "1.1",
  height: "100%",
  width: "100%"
};
const _hoisted_12$3 = /* @__PURE__ */ createElementVNode("div", { class: "vc-bg-blue-500 vc-text-white vc-p-2" }, " SVG\u8BBE\u5907 ", -1);
const _hoisted_13$3 = { class: "vc-flex vc-flex-row vc-flex-wrap vc-items-center" };
const _hoisted_14$2 = ["onDragstart", "onClick"];
const _hoisted_15$2 = /* @__PURE__ */ createElementVNode("div", { class: "vc-bg-blue-500 vc-text-white vc-p-2" }, " \u56FE\u7247\u8BBE\u5907 ", -1);
const _hoisted_16$2 = { class: "vc-p-2" };
const _hoisted_17$2 = ["onDragstart"];
const _hoisted_18$2 = ["src"];
const _hoisted_19$1 = /* @__PURE__ */ createElementVNode("div", { class: "vc-bg-blue-500 vc-text-white vc-p-2" }, " \u6570\u636E\u70B9 ", -1);
const _hoisted_20$1 = { class: "vc-p-2 vc-flex vc-flex-row vc-flex-wrap vc-items-center" };
const _sfc_main$o = /* @__PURE__ */ defineComponent({
  props: {
    showSvgDetail: null
  },
  setup(__props) {
    const { pipePathLegendData, deviceImageLegendData, deviceSvgLegendData, flowPathLegendData } = inject(RootCommonKey);
    const {
      innerPipeSize,
      pipeSize,
      d: pipeD,
      updateOptions,
      outerOpacity,
      pipeComposeData
    } = usePipePath({
      containerHeight: 100,
      containerWidth: 100,
      scaleFactor: 1
    });
    let resizeObserver;
    const pipeLegendContainer = shallowRef(null);
    onMounted(() => {
      if (pipeLegendContainer.value) {
        resizeObserver = new index((entries) => {
          const entry = entries[0];
          if (entry) {
            updateOptions({
              containerWidth: entry.contentRect.width,
              containerHeight: entry.contentRect.height / pipePathLegendData.value.length,
              pipeLength: entry.contentRect.width * 0.8,
              scaleFactor: 1
            });
          }
        });
        resizeObserver.observe(pipeLegendContainer.value);
      }
    });
    onBeforeUnmount(() => {
      if (resizeObserver) {
        console.log("=======>ResizeObserver unmount");
        resizeObserver.disconnect();
        resizeObserver = null;
      }
    });
    pipePathLegendData.value = [
      { type: PipePathType.flat, colors: ["#ffffff", "#B9C0CC"], outerOpacity },
      { type: PipePathType.pipe, colors: ["#333333"], composeData: pipeComposeData.value }
    ];
    const _deviceImageLegendData = [];
    for (const key in ImgDetail) {
      _deviceImageLegendData.push({
        src: ImgDetail[key].src,
        name: key
      });
    }
    deviceImageLegendData.value = _deviceImageLegendData;
    const svgKeys = [];
    for (const key in SvgDetail) {
      svgKeys.push(key);
    }
    deviceSvgLegendData.value = svgKeys.map((name) => {
      return {
        name,
        comp: defineAsyncComponent(() => __variableDynamicImportRuntime0__$1(`../components/Device/resource/${name}.vue`)),
        width: SvgDetail[name].width * 1.5
      };
    });
    flowPathLegendData.value = [
      { type: FlowPathType.Arrow },
      { type: FlowPathType.Diamond },
      { type: FlowPathType.DottedArrow },
      { type: FlowPathType.Triangle }
    ];
    function legendGragstart(e, type, index2) {
      var _a2, _b;
      (_a2 = e.dataTransfer) == null ? void 0 : _a2.setData("type", type);
      if (index2 !== void 0) {
        (_b = e.dataTransfer) == null ? void 0 : _b.setData("index", String(index2));
      }
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$h, [
        _hoisted_2$e,
        createElementVNode("div", {
          ref: (_value, _refs) => {
            _refs["pipeLegendContainer"] = _value;
            isRef(pipeLegendContainer) && (pipeLegendContainer.value = _value);
          },
          class: "vc-p-2"
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pipePathLegendData), (el, i) => {
            return openBlock(), createElementBlock("div", {
              key: i,
              class: "vc-cursor-move hover:vc-bg-gray-200"
            }, [
              createElementVNode("div", {
                class: "vc-h-12",
                draggable: "true",
                onDragstart: ($event) => legendGragstart($event, unref(ConfigurationType).PipePath, i)
              }, [
                (openBlock(), createElementBlock("svg", _hoisted_4$8, [
                  el.colors && el.type === unref(PipePathType).flat ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                    createElementVNode("path", {
                      d: unref(pipeD),
                      stroke: el.colors[1],
                      style: normalizeStyle([{ "fill": "none" }, { "stroke-width": unref(pipeSize), "stroke-opacity": el.outerOpacity }]),
                      "stroke-linecap": "round",
                      "stroke-linejoin": "round"
                    }, null, 12, _hoisted_5$6),
                    createElementVNode("path", {
                      d: unref(pipeD),
                      "stroke-dasharray": "2, 5",
                      stroke: el.colors[0],
                      style: normalizeStyle([{ "fill": "none" }, { "stroke-width": unref(innerPipeSize) }])
                    }, null, 12, _hoisted_6$6)
                  ], 64)) : el.type === unref(PipePathType).pipe && el.composeData ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(el.composeData, (item) => {
                    return openBlock(), createElementBlock("path", {
                      key: item.stroke,
                      d: unref(pipeD),
                      stroke: item.stroke,
                      "stroke-linecap": "round",
                      "stroke-linejoin": "round",
                      style: normalizeStyle({
                        "stroke-width": item.strokeWidth,
                        fill: "none"
                      })
                    }, null, 12, _hoisted_7$6);
                  }), 128)) : createCommentVNode("", true)
                ]))
              ], 40, _hoisted_3$b)
            ]);
          }), 128))
        ], 512),
        _hoisted_8$5,
        createElementVNode("div", _hoisted_9$5, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(flowPathLegendData), (el, i) => {
            return openBlock(), createElementBlock("div", {
              key: i,
              class: "vc-cursor-move vc-hover:bg-gray-200 vc-mb-2 vc-mr-2"
            }, [
              createElementVNode("div", {
                style: normalizeStyle({ width: unref(FlowPathLegendSize).width + "px", height: unref(FlowPathLegendSize).height + "px" }),
                draggable: "true",
                onDragstart: ($event) => legendGragstart($event, unref(ConfigurationType).FlowPath, i)
              }, [
                (openBlock(), createElementBlock("svg", _hoisted_11$4, [
                  createVNode(_sfc_main$p, {
                    "center-x": unref(FlowPathLegendSize).width / 2,
                    "center-y": unref(FlowPathLegendSize).height / 2,
                    "init-width": unref(FlowPathLegendSize).width,
                    "init-height": unref(FlowPathLegendSize).height,
                    index: i,
                    "scale-factor": 1,
                    type: el.type
                  }, null, 8, ["center-x", "center-y", "init-width", "init-height", "index", "type"])
                ]))
              ], 44, _hoisted_10$4)
            ]);
          }), 128))
        ]),
        _hoisted_12$3,
        createElementVNode("div", _hoisted_13$3, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(deviceSvgLegendData), (el, i) => {
            return openBlock(), createElementBlock("div", {
              key: el.name,
              class: "vc-p-0.5 vc-cursor-move vc-rounded-md hover:vc-bg-gray-200"
            }, [
              createElementVNode("div", {
                draggable: "true",
                onDragstart: ($event) => legendGragstart($event, unref(ConfigurationType).DeviceSvg, i),
                onClick: ($event) => __props.showSvgDetail(el)
              }, [
                (openBlock(), createBlock(resolveDynamicComponent(el.comp), {
                  width: el.width
                }, null, 8, ["width"]))
              ], 40, _hoisted_14$2)
            ]);
          }), 128))
        ]),
        _hoisted_15$2,
        createElementVNode("div", _hoisted_16$2, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(deviceImageLegendData), (el, i) => {
            return openBlock(), createElementBlock("div", {
              key: el.src,
              class: "vc-w-36 vc-h-36 vc-border vc-border-gray-300 vc-cursor-move"
            }, [
              createElementVNode("div", {
                class: "vc-w-full vc-h-full",
                draggable: "true",
                onDragstart: ($event) => legendGragstart($event, unref(ConfigurationType).DeviceImage, i)
              }, [
                createElementVNode("img", {
                  src: el.src,
                  class: "vc-w-full"
                }, null, 8, _hoisted_18$2)
              ], 40, _hoisted_17$2)
            ]);
          }), 128))
        ]),
        _hoisted_19$1,
        createElementVNode("div", _hoisted_20$1, [
          createElementVNode("div", {
            class: "vc-border vc-border-solid vc-border-gray-400 vc-p-1 vc-cursor-pointer vc-text-center",
            draggable: "true",
            onDragstart: _cache[0] || (_cache[0] = ($event) => legendGragstart($event, unref(ConfigurationType).LabelValue))
          }, [
            createElementVNode("div", {
              style: normalizeStyle({ color: unref(LabelColor) })
            }, "label", 4),
            createElementVNode("div", null, [
              createElementVNode("span", {
                style: normalizeStyle([{ color: unref(ValueColor) }, { "margin-right": "3px" }])
              }, "value", 4),
              createElementVNode("span", {
                style: normalizeStyle({ color: unref(UnitColor) })
              }, "unit", 4)
            ])
          ], 32)
        ])
      ]);
    };
  }
});
function useSelect({ connection, compInstance, onMousedown, getSvgInfo, isEditor }) {
  const curSelectData = reactive([]);
  function getSelectedIndex(toggleSelData) {
    for (let i = 0; i < curSelectData.length; i++) {
      const el = curSelectData[i];
      if (el.type === toggleSelData.type && el.index === toggleSelData.index) {
        return i;
      }
    }
    return false;
  }
  function resetSelect(exceptIndex) {
    for (let i = curSelectData.length - 1; i >= 0; i--) {
      if (exceptIndex === i)
        continue;
      const el = curSelectData[i];
      el.unSelect && el.unSelect();
      curSelectData.splice(i, 1);
    }
  }
  function toggleSelect(toggleSelData) {
    const selIndex = getSelectedIndex(toggleSelData);
    if (toggleSelData.selected) {
      if (!toggleSelData.multiple) {
        resetSelect(selIndex);
      }
      if (selIndex === false) {
        curSelectData.push(toggleSelData);
      }
    } else {
      if (selIndex !== false) {
        curSelectData.splice(selIndex, 1);
      }
    }
  }
  const boxSelect = reactive({
    x: -1,
    y: -1,
    width: 0,
    height: 0
  });
  let exceptRectIds = [];
  const { dragStart } = useDrag({
    unStopPropagation: !isEditor.value,
    getRelativeElement() {
      const info = getSvgInfo();
      return info.container;
    },
    start(startData, e) {
      boxSelect.width = 0;
      boxSelect.height = 0;
      boxSelect.x = startData.x;
      boxSelect.y = startData.y;
      onMousedown(e);
      return {
        startTarget: e.target
      };
    },
    move({ dx, dy, offsetX, offsetY, startData }) {
      if (isEditor.value) {
        if (dx < 0) {
          boxSelect.x = offsetX;
        } else {
          boxSelect.x = startData.x;
        }
        if (dy < 0) {
          boxSelect.y = offsetY;
        } else {
          boxSelect.y = startData.y;
        }
        boxSelect.width = Math.abs(dx);
        boxSelect.height = Math.abs(dy);
      }
    },
    end({ isClick, startResult }) {
      if (isClick) {
        if (startResult.startTarget.getAttribute("data-configuration")) {
          resetSelect();
        }
      } else if (isEditor.value) {
        let hasReset = false;
        for (const i in compInstance) {
          const ins = compInstance[i];
          if (ins && ins.isInBoxSelect) {
            if (ins.isInBoxSelect(boxSelect)) {
              if (!hasReset) {
                hasReset = true;
                resetSelect();
              }
              ins.select();
            }
          }
        }
        exceptRectIds = [];
        curSelectData.forEach((el) => {
          if (el.getPipePathInfo) {
            const points = el.getPipePathInfo().points;
            points.forEach((p) => {
              const drags = connection.getConnect(p.id);
              if (drags && drags.length > 0) {
                const index2 = curSelectData.findIndex((el2) => el2.id === drags[0].id);
                if (index2 >= 0) {
                  exceptRectIds.push(p.id);
                }
              }
            });
          }
        });
      }
      boxSelect.width = 0;
      boxSelect.height = 0;
    }
  });
  const multipleSelect = {
    startTogether(id) {
      if (curSelectData.length < 2) {
        return false;
      }
      if (curSelectData.findIndex((el) => el.id === id) === -1)
        return false;
      curSelectData.forEach((el) => {
        let startData;
        if (el.drag && el.drag.start) {
          startData = el.drag.startData = el.drag.start();
        }
        if (startData && startData.pointIds) {
          startData.dragTogetherPoints.forEach((el2) => {
            connection.startTogether(el2.id, [...startData.pointIds, ...exceptRectIds]);
          });
        } else {
          connection.startTogether(el.id, [...exceptRectIds]);
        }
      });
      return true;
    },
    moveTogether(moveOptions) {
      curSelectData.forEach((el) => {
        if (el.drag) {
          moveOptions.startData = el.drag.startData;
          el.drag.move(moveOptions);
        }
        const startData = moveOptions.startData;
        if (startData && startData.pointIds) {
          startData.dragTogetherPoints.forEach((el2) => {
            connection.moveTogether(el2.id, moveOptions, [...startData.pointIds, ...exceptRectIds]);
          });
        } else {
          connection.moveTogether(el.id, moveOptions, [...exceptRectIds]);
        }
      });
    },
    endTogether() {
      curSelectData.forEach((el) => {
        let startData;
        if (el.drag && el.drag.end) {
          el.drag.end();
          startData = el.drag.startData;
        }
        if (startData && startData.pointIds) {
          startData.dragTogetherPoints.forEach((el2) => {
            connection.endTogether(el2.id, [...startData.pointIds, ...exceptRectIds]);
          });
        } else {
          connection.endTogether(el.id, [...exceptRectIds]);
        }
      });
    }
  };
  return {
    boxSelect,
    toggleSelect,
    startSelect: dragStart,
    multipleSelect,
    curSelectData
  };
}
const _hoisted_1$g = { class: "vc-text-center vc-font-semibold vc-text-lg vc-p-2 vc-border-b vc-border-gray-300" };
const _hoisted_2$d = { class: "vc-p-2 vc-pb-0 vc-flex vc-flex-row vc-flex-wrap vc-items-center" };
const _hoisted_3$a = { class: "vc-font-semibold vc-mb-2" };
const _hoisted_4$7 = { key: 0 };
const _sfc_main$n = /* @__PURE__ */ defineComponent({
  props: {
    title: null,
    data: null
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", null, [
        createElementVNode("div", _hoisted_1$g, toDisplayString(__props.title), 1),
        createElementVNode("div", _hoisted_2$d, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (el) => {
            return openBlock(), createElementBlock("div", {
              key: el.name,
              class: normalizeClass(["vc-mb-4", { "vc-w-full": !el.inline, "vc-mr-2": el.inline }])
            }, [
              createElementVNode("div", _hoisted_3$a, toDisplayString(el.name), 1),
              el.value !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_4$7, [
                createElementVNode("span", {
                  class: normalizeClass(["vc-text-gray-600", [el.slotName ? "vc-inline-block vc-w-12" : ""]])
                }, toDisplayString(el.value) + toDisplayString(el.unit), 3),
                el.slotName ? renderSlot(_ctx.$slots, el.slotName, { key: 0 }) : createCommentVNode("", true)
              ])) : el.slotName ? renderSlot(_ctx.$slots, el.slotName, { key: 1 }) : createCommentVNode("", true)
            ], 2);
          }), 128))
        ]),
        renderSlot(_ctx.$slots, "default")
      ]);
    };
  }
});
const _sfc_main$m = /* @__PURE__ */ defineComponent({
  props: {
    deviceSvgNum: null,
    deviceImageNum: null,
    pipePathNum: null,
    labelValueNum: null,
    flowPathNum: null,
    svgWidth: null,
    svgHeight: null
  },
  setup(__props) {
    const props = __props;
    const data = computed(() => {
      return [
        { name: "\u753B\u5E03\u5927\u5C0F", value: `${Math.round(props.svgWidth)} X ${Math.round(props.svgHeight)}` },
        { name: "\u8BBE\u5907\u6570\u91CF", value: props.deviceImageNum + props.deviceSvgNum },
        { name: "\u7BA1\u9053\u6570\u91CF", value: props.pipePathNum },
        { name: "\u6570\u636E\u70B9\u6570\u91CF", value: props.labelValueNum },
        { name: "\u6D41\u7A0B\u7EC4\u4EF6\u6570\u91CF", value: props.flowPathNum }
      ];
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$n, {
        title: "\u753B\u5E03",
        data: unref(data)
      }, null, 8, ["data"]);
    };
  }
});
function clockwise90(curDeg) {
  let deg = 0;
  const degs = [90, 180, 270];
  for (let i = 0; i < degs.length; i++) {
    const val = degs[i];
    if (curDeg < val) {
      deg = val;
      break;
    }
  }
  return deg;
}
const isMobile = !!navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
const _sfc_main$l = /* @__PURE__ */ defineComponent({
  props: {
    y: null,
    x: null,
    width: null,
    height: null,
    rotate: null,
    setRotate: null
  },
  setup(__props) {
    const props = __props;
    const data = computed(() => {
      return [
        { name: "\u8BBE\u5907\u5927\u5C0F", value: `${Math.round(props.width)} X ${Math.round(props.height)}` },
        { name: "\u8BBE\u5907\u5750\u6807", value: `${Math.round(props.x)} X ${Math.round(props.y)}` },
        { name: "\u65CB\u8F6C\u89D2\u5EA6(\u987A\u65F6\u9488\u65B9\u5411)", value: Math.round(props.rotate), unit: "\xB0", slotName: "rotate" }
      ];
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$n, {
        title: "\u8BBE\u5907",
        data: unref(data)
      }, {
        rotate: withCtx(() => [
          createElementVNode("button", {
            class: "vc-btn vc-mr-2",
            onClick: _cache[0] || (_cache[0] = ($event) => __props.setRotate(0))
          }, "\u91CD\u7F6E"),
          createElementVNode("button", {
            class: "vc-btn",
            title: "\u987A\u65F6\u9488\u65CB\u8F6C90\xB0",
            onClick: _cache[1] || (_cache[1] = ($event) => __props.setRotate(unref(clockwise90)(__props.rotate)))
          }, [
            createVNode(_sfc_main$v, { name: "rotate" })
          ])
        ]),
        _: 1
      }, 8, ["data"]);
    };
  }
});
const _sfc_main$k = /* @__PURE__ */ defineComponent({
  props: {
    deviceNum: null,
    pipePathNum: null,
    labelValueNum: null,
    flowPathNum: null
  },
  setup(__props) {
    const props = __props;
    const data = computed(() => {
      return [
        { name: "\u8BBE\u5907\u6570\u91CF", value: props.deviceNum },
        { name: "\u7BA1\u9053\u6570\u91CF", value: props.pipePathNum },
        { name: "\u6570\u636E\u70B9\u6570\u91CF", value: props.labelValueNum },
        { name: "\u6D41\u7A0B\u7EC4\u4EF6\u6570\u91CF", value: props.flowPathNum }
      ];
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$n, {
        title: "\u591A\u9009",
        data: unref(data)
      }, null, 8, ["data"]);
    };
  }
});
const _hoisted_1$f = { class: "vc-p-2 vc-pb-0 vc-flex vc-flex-row vc-flex-wrap vc-items-center" };
const _hoisted_2$c = { class: "vc-mb-4 vc-w-full" };
const _hoisted_3$9 = /* @__PURE__ */ createElementVNode("div", { class: "vc-font-semibold vc-mb-2" }, "\u6D41\u52A8", -1);
const _hoisted_4$6 = {
  key: 0,
  class: "vc-mb-4 vc-w-full"
};
const _hoisted_5$5 = /* @__PURE__ */ createElementVNode("div", { class: "vc-font-semibold vc-mb-2" }, "\u901F\u5EA6", -1);
const _hoisted_6$5 = ["disabled", "onClick"];
const _hoisted_7$5 = { class: "vc-mb-4 vc-mr-4" };
const _hoisted_8$4 = /* @__PURE__ */ createElementVNode("div", { class: "vc-font-semibold vc-mb-2" }, "\u5916\u7BA1\u9053\u5C3A\u5BF8", -1);
const _hoisted_9$4 = /* @__PURE__ */ createTextVNode("px ");
const _hoisted_10$3 = {
  key: 1,
  class: "vc-mb-4"
};
const _hoisted_11$3 = /* @__PURE__ */ createElementVNode("div", { class: "vc-font-semibold vc-mb-2" }, "\u5916\u7BA1\u9053\u989C\u8272", -1);
const _hoisted_12$2 = /* @__PURE__ */ createElementVNode("span", { class: "vc-align-middle" }, "%", -1);
const _hoisted_13$2 = { class: "vc-mb-4 vc-mr-4" };
const _hoisted_14$1 = /* @__PURE__ */ createElementVNode("div", { class: "vc-font-semibold vc-mb-2" }, " \u865A\u7EBF\u5C3A\u5BF8", -1);
const _hoisted_15$1 = /* @__PURE__ */ createTextVNode("px ");
const _hoisted_16$1 = { class: "vc-mb-4 vc-mr-4" };
const _hoisted_17$1 = /* @__PURE__ */ createElementVNode("div", { class: "vc-font-semibold vc-mb-2" }, "\u865A\u7EBF\u989C\u8272", -1);
const _hoisted_18$1 = { class: "vc-mb-4" };
const _hoisted_19 = /* @__PURE__ */ createElementVNode("div", { class: "vc-font-semibold vc-mb-2" }, " \u865A\u7EBF\u957F\u5EA6\u548C\u95F4\u8DDD", -1);
const _hoisted_20 = /* @__PURE__ */ createTextVNode(",");
const _hoisted_21 = /* @__PURE__ */ createTextVNode("px ");
const _sfc_main$j = /* @__PURE__ */ defineComponent({
  props: {
    isFloating: { type: Boolean },
    isReverse: { type: Boolean },
    speed: null,
    pipePathStyle: null,
    type: null
  },
  emits: ["update:isFloating", "update:isReverse", "update:pipePathStyle", "update:speed"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const speedText = ["\u6162\u901F", "\u6B63\u5E38", "\u4E2D\u7B49", "\u5FEB\u901F"];
    const innerStyle = ref(__spreadValues({}, props.pipePathStyle));
    let triggerPropsWatch = true;
    watch(innerStyle, (v) => {
      if (v.innerSize > v.outerSize) {
        v.innerSize = v.outerSize;
      }
      if (v.outerOpacity < 0) {
        v.outerOpacity = 0;
      } else if (v.outerOpacity > 100) {
        v.outerOpacity = 100;
      }
      triggerPropsWatch = false;
      emits("update:pipePathStyle", __spreadValues({}, v));
      nextTick(() => {
        triggerPropsWatch = true;
      });
    }, {
      deep: true
    });
    watch(() => props.pipePathStyle, (v) => {
      if (!triggerPropsWatch)
        return;
      innerStyle.value = v;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$f, [
        createElementVNode("div", _hoisted_2$c, [
          _hoisted_3$9,
          createElementVNode("div", null, [
            createElementVNode("button", {
              class: "vc-btn vc-mr-2",
              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:isFloating", !__props.isFloating))
            }, toDisplayString(__props.isFloating ? "\u505C\u6B62" : "\u5F00\u59CB"), 1)
          ])
        ]),
        __props.isFloating ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
          _hoisted_5$5,
          createElementVNode("div", null, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(PipePathSpeed), (val) => {
              return openBlock(), createElementBlock(Fragment, { key: val }, [
                speedText[val] ? (openBlock(), createElementBlock("button", {
                  key: 0,
                  class: normalizeClass(["vc-btn vc-mr-1", { "vc-btn-disable": __props.speed === val }]),
                  disabled: __props.speed === val,
                  onClick: ($event) => _ctx.$emit("update:speed", val)
                }, toDisplayString(speedText[val]), 11, _hoisted_6$5)) : createCommentVNode("", true)
              ], 64);
            }), 128))
          ])
        ])) : createCommentVNode("", true),
        createElementVNode("div", _hoisted_7$5, [
          _hoisted_8$4,
          createElementVNode("div", null, [
            withDirectives(createElementVNode("input", {
              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => innerStyle.value.outerSize = $event),
              type: "number",
              class: "vc-w-16 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded"
            }, null, 512), [
              [vModelText, innerStyle.value.outerSize]
            ]),
            _hoisted_9$4
          ])
        ]),
        __props.type === unref(PipePathType).flat && innerStyle.value.outerColor ? (openBlock(), createElementBlock("div", _hoisted_10$3, [
          _hoisted_11$3,
          createElementVNode("div", null, [
            withDirectives(createElementVNode("input", {
              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => innerStyle.value.outerColor = $event),
              type: "color",
              class: "vc-align-middle"
            }, null, 512), [
              [vModelText, innerStyle.value.outerColor]
            ]),
            withDirectives(createElementVNode("input", {
              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => innerStyle.value.outerOpacity = $event),
              type: "number",
              class: "vc-w-12 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded vc-align-middle"
            }, null, 512), [
              [vModelText, innerStyle.value.outerOpacity]
            ]),
            _hoisted_12$2
          ])
        ])) : createCommentVNode("", true),
        createElementVNode("div", _hoisted_13$2, [
          _hoisted_14$1,
          createElementVNode("div", null, [
            withDirectives(createElementVNode("input", {
              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => innerStyle.value.innerSize = $event),
              type: "number",
              class: "vc-w-16 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded"
            }, null, 512), [
              [vModelText, innerStyle.value.innerSize]
            ]),
            _hoisted_15$1
          ])
        ]),
        createElementVNode("div", _hoisted_16$1, [
          _hoisted_17$1,
          createElementVNode("div", null, [
            withDirectives(createElementVNode("input", {
              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => innerStyle.value.innerColor = $event),
              type: "color"
            }, null, 512), [
              [vModelText, innerStyle.value.innerColor]
            ])
          ])
        ]),
        createElementVNode("div", _hoisted_18$1, [
          _hoisted_19,
          createElementVNode("div", null, [
            withDirectives(createElementVNode("input", {
              "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => innerStyle.value.dottedSize = $event),
              type: "number",
              class: "vc-w-12 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded",
              min: "1",
              max: "20"
            }, null, 512), [
              [vModelText, innerStyle.value.dottedSize]
            ]),
            _hoisted_20,
            withDirectives(createElementVNode("input", {
              "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => innerStyle.value.dottedMargin = $event),
              type: "number",
              min: "1",
              max: "20",
              class: "vc-w-12 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded"
            }, null, 512), [
              [vModelText, innerStyle.value.dottedMargin]
            ]),
            _hoisted_21
          ])
        ])
      ]);
    };
  }
});
const _sfc_main$i = /* @__PURE__ */ defineComponent({
  props: {
    points: null,
    isFloating: { type: Boolean },
    isReverse: { type: Boolean },
    pipePathStyle: null,
    type: null,
    speed: null,
    setFloating: null,
    setReverse: null,
    setStyle: null,
    setSpeed: null
  },
  setup(__props) {
    const props = __props;
    function getPartLen(points) {
      let len = 0;
      for (let i = 0; i < points.length - 1; i++) {
        len += calc2pointDistance(points[i], points[i + 1]);
      }
      return len;
    }
    const data = computed(() => {
      let sumLen = 0;
      let pointsNum = 0;
      let partPoints = [];
      props.points.forEach((p) => {
        if (p.isParentNode) {
          sumLen += getPartLen(partPoints);
          partPoints = [];
        } else {
          pointsNum++;
        }
        partPoints.push(p);
      });
      if (partPoints.length > 1) {
        sumLen += getPartLen(partPoints);
      }
      return [
        { name: "\u8282\u70B9\u6570\u91CF", value: pointsNum },
        { name: "\u7BA1\u9053\u603B\u957F\u5EA6", value: Math.round(sumLen), unit: "px" }
      ];
    });
    const innerStyle = ref(__spreadValues({}, props.pipePathStyle));
    watch(innerStyle, (v) => {
      props.setStyle(v);
    }, {
      deep: true
    });
    watch(() => props.pipePathStyle, (v) => {
      innerStyle.value = v;
    });
    const innerIsFloating = ref(props.isFloating);
    watch(innerIsFloating, (v) => {
      props.setFloating(v);
    });
    watch(() => props.isFloating, (v) => {
      innerIsFloating.value = v;
    });
    const innerIsReverse = ref(props.isReverse);
    watch(innerIsReverse, (v) => {
      props.setReverse(v);
    });
    watch(() => props.isReverse, (v) => {
      innerIsReverse.value = v;
    });
    const innerSpeed = ref(props.speed);
    watch(innerSpeed, (v) => {
      props.setSpeed(v);
    });
    watch(() => props.speed, (v) => {
      innerSpeed.value = v;
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$n, {
        title: "\u8FDE\u63A5\u7BA1\u9053",
        data: unref(data)
      }, {
        default: withCtx(() => [
          createVNode(_sfc_main$j, {
            isFloating: innerIsFloating.value,
            "onUpdate:isFloating": _cache[0] || (_cache[0] = ($event) => innerIsFloating.value = $event),
            isReverse: innerIsReverse.value,
            "onUpdate:isReverse": _cache[1] || (_cache[1] = ($event) => innerIsReverse.value = $event),
            pipePathStyle: innerStyle.value,
            "onUpdate:pipePathStyle": _cache[2] || (_cache[2] = ($event) => innerStyle.value = $event),
            speed: innerSpeed.value,
            "onUpdate:speed": _cache[3] || (_cache[3] = ($event) => innerSpeed.value = $event),
            type: __props.type
          }, null, 8, ["isFloating", "isReverse", "pipePathStyle", "speed", "type"])
        ]),
        _: 1
      }, 8, ["data"]);
    };
  }
});
const _hoisted_1$e = { class: "vc-mb-2" };
const _hoisted_2$b = /* @__PURE__ */ createElementVNode("option", { value: "inhert" }, "\u9ED8\u8BA4", -1);
const _hoisted_3$8 = /* @__PURE__ */ createTextVNode(" px ");
const _hoisted_4$5 = { class: "vc-inline-flex vc-items-center vc-flex-row vc-w-full vc-mt-2 vc-h-8" };
const _hoisted_5$4 = /* @__PURE__ */ createElementVNode("label", { class: "vc-inline-block vc-flex-1" }, [
  /* @__PURE__ */ createElementVNode("input", {
    class: "vc-align-middle vc-mr-1",
    type: "checkbox",
    checked: "",
    disabled: ""
  }),
  /* @__PURE__ */ createElementVNode("span", { class: "vc-align-middle" }, "\u5B57\u4F53\u989C\u8272")
], -1);
const _hoisted_6$4 = {
  key: 0,
  class: "vc-inline-flex vc-items-center vc-flex-row vc-w-full vc-mt-2 vc-h-8"
};
const _hoisted_7$4 = { class: "vc-inline-block vc-flex-1" };
const _hoisted_8$3 = /* @__PURE__ */ createElementVNode("span", { class: "vc-align-middle" }, "\u80CC\u666F\u989C\u8272", -1);
const _hoisted_9$3 = {
  key: 1,
  class: "vc-inline-flex vc-items-center vc-flex-row vc-w-full vc-mt-2 vc-h-8"
};
const _hoisted_10$2 = { class: "vc-inline-block vc-flex-1" };
const _hoisted_11$2 = /* @__PURE__ */ createElementVNode("span", { class: "vc-align-middle" }, "\u8FB9\u6846\u989C\u8272", -1);
const _sfc_main$h = /* @__PURE__ */ defineComponent({
  props: {
    value: null,
    enableEmptyStyle: { type: Boolean },
    defaultValue: null,
    hideBgBorder: { type: Boolean }
  },
  emits: ["update:value"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const fontFamilyData = ["Verdana", "Helvetica", "Times New Roman", "Garamond", "Comic Sans MS"];
    function getStyleWithDefaults(style) {
      return Object.assign({
        color: "#000000",
        "font-family": "inhert"
      }, props.defaultValue || {}, style);
    }
    const innerStyle = ref({});
    function updateStyle(key, value) {
      if (innerStyle.value[key]) {
        delete innerStyle.value[key];
      } else {
        innerStyle.value[key] = value;
      }
    }
    const minFontSize = 8;
    const maxFontSize = 999;
    function getFontSize() {
      const val = innerStyle.value["font-size"];
      if (val) {
        return parseInt(val + "");
      } else {
        if (props.enableEmptyStyle) {
          return "";
        } else {
          return minFontSize;
        }
      }
    }
    const fontSize = ref(getFontSize());
    watch(fontSize, (v) => {
      if (v === "" && props.enableEmptyStyle) {
        delete innerStyle.value["font-size"];
      } else {
        if (v < minFontSize) {
          v = minFontSize;
        } else if (v > maxFontSize) {
          v = maxFontSize;
        }
        innerStyle.value["font-size"] = v + "px";
      }
      canTriggerValueWatch = false;
      nextTick(() => {
        canTriggerValueWatch = true;
      });
    });
    function fontSizeBlur() {
      if (fontSize.value === "" && props.enableEmptyStyle) {
        delete innerStyle.value["font-size"];
      } else {
        if (fontSize.value < minFontSize) {
          fontSize.value = minFontSize;
        } else if (fontSize.value > maxFontSize) {
          fontSize.value = maxFontSize;
        }
        innerStyle.value["font-size"] = fontSize.value + "px";
      }
    }
    let canTriggerInnerStyleWatch = true;
    watch(innerStyle, (v) => {
      if (!canTriggerInnerStyleWatch)
        return;
      emits("update:value", __spreadValues({}, v));
    }, {
      deep: true
    });
    let canTriggerColorEnable = true;
    const bgColorEnable = ref(false);
    watch(bgColorEnable, (v) => {
      if (!canTriggerColorEnable)
        return;
      if (v) {
        innerStyle.value["background-color"] = "#f2f2f2";
      } else {
        delete innerStyle.value["background-color"];
      }
    });
    const borderColorEnable = ref(false);
    watch(borderColorEnable, (v) => {
      if (!canTriggerColorEnable)
        return;
      if (v) {
        innerStyle.value["border-color"] = "#333333";
        innerStyle.value["border-width"] = "1px";
        innerStyle.value["border-style"] = "solid";
      } else {
        delete innerStyle.value["border-color"];
        delete innerStyle.value["border-width"];
        delete innerStyle.value["border-style"];
      }
    });
    let canTriggerValueWatch = true;
    watch(() => props.value, (v) => {
      if (!canTriggerValueWatch)
        return;
      canTriggerInnerStyleWatch = false;
      canTriggerColorEnable = false;
      innerStyle.value = getStyleWithDefaults(v);
      fontSize.value = getFontSize();
      bgColorEnable.value = !!innerStyle.value["background-color"];
      borderColorEnable.value = !!innerStyle.value["border-color"];
      nextTick(() => {
        canTriggerInnerStyleWatch = true;
        canTriggerColorEnable = true;
      });
    }, {
      immediate: true
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", null, [
        createElementVNode("p", _hoisted_1$e, [
          withDirectives(createElementVNode("select", {
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => innerStyle.value["font-family"] = $event),
            class: "vc-w-full vc-p-1 vc-rounded vc-border vc-border-solid vc-border-gray-200"
          }, [
            _hoisted_2$b,
            (openBlock(), createElementBlock(Fragment, null, renderList(fontFamilyData, (el) => {
              return createElementVNode("option", { key: el }, toDisplayString(el), 1);
            }), 64))
          ], 512), [
            [vModelSelect, innerStyle.value["font-family"]]
          ])
        ]),
        createElementVNode("p", null, [
          createElementVNode("button", {
            class: normalizeClass(["vc-btn vc-py-1", { "vc-btn-blue": innerStyle.value["font-weight"] === "bold" }]),
            onClick: _cache[1] || (_cache[1] = ($event) => updateStyle("font-weight", "bold"))
          }, [
            createVNode(_sfc_main$v, { name: "bold" })
          ], 2),
          createElementVNode("button", {
            class: normalizeClass(["vc-btn vc-py-1 vc-mx-2", { "vc-btn-blue": innerStyle.value["text-decoration"] === "underline" }]),
            onClick: _cache[2] || (_cache[2] = ($event) => updateStyle("text-decoration", "underline"))
          }, [
            createVNode(_sfc_main$v, { name: "underline" })
          ], 2),
          createElementVNode("button", {
            class: normalizeClass(["vc-btn vc-py-1", { "vc-btn-blue": innerStyle.value["font-style"] === "italic" }]),
            onClick: _cache[3] || (_cache[3] = ($event) => updateStyle("font-style", "italic"))
          }, [
            createVNode(_sfc_main$v, { name: "italic" })
          ], 2),
          withDirectives(createElementVNode("input", {
            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => fontSize.value = $event),
            class: "vc-ml-1 vc-w-16 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded",
            type: "number",
            onBlur: fontSizeBlur
          }, null, 544), [
            [vModelText, fontSize.value]
          ]),
          _hoisted_3$8
        ]),
        createElementVNode("div", _hoisted_4$5, [
          _hoisted_5$4,
          withDirectives(createElementVNode("input", {
            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => innerStyle.value["color"] = $event),
            type: "color"
          }, null, 512), [
            [vModelText, innerStyle.value["color"]]
          ])
        ]),
        !__props.hideBgBorder ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
          createElementVNode("label", _hoisted_7$4, [
            withDirectives(createElementVNode("input", {
              "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => bgColorEnable.value = $event),
              class: "vc-align-middle vc-mr-1",
              type: "checkbox"
            }, null, 512), [
              [vModelCheckbox, bgColorEnable.value]
            ]),
            _hoisted_8$3
          ]),
          bgColorEnable.value ? withDirectives((openBlock(), createElementBlock("input", {
            key: 0,
            "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => innerStyle.value["background-color"] = $event),
            type: "color"
          }, null, 512)), [
            [vModelText, innerStyle.value["background-color"]]
          ]) : createCommentVNode("", true)
        ])) : createCommentVNode("", true),
        !__props.hideBgBorder ? (openBlock(), createElementBlock("div", _hoisted_9$3, [
          createElementVNode("label", _hoisted_10$2, [
            withDirectives(createElementVNode("input", {
              "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => borderColorEnable.value = $event),
              class: "vc-align-middle vc-mr-1",
              type: "checkbox"
            }, null, 512), [
              [vModelCheckbox, borderColorEnable.value]
            ]),
            _hoisted_11$2
          ]),
          borderColorEnable.value ? withDirectives((openBlock(), createElementBlock("input", {
            key: 0,
            "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => innerStyle.value["border-color"] = $event),
            type: "color"
          }, null, 512)), [
            [vModelText, innerStyle.value["border-color"]]
          ]) : createCommentVNode("", true)
        ])) : createCommentVNode("", true)
      ]);
    };
  }
});
const _hoisted_1$d = ["value"];
const _hoisted_2$a = ["disabled"];
const _hoisted_3$7 = ["disabled"];
const _sfc_main$g = /* @__PURE__ */ defineComponent({
  props: {
    labelCssProps: null,
    valueCssProps: null,
    unitCssProps: null,
    rotate: null,
    position: null,
    hideValue: { type: Boolean },
    hideLabel: { type: Boolean },
    hideUnit: { type: Boolean },
    dataKey: null,
    setRotate: null,
    setCssProps: null,
    setPosition: null,
    setPartHide: null,
    setDataKey: null
  },
  setup(__props) {
    const props = __props;
    const innerLabelCssProps = ref(props.labelCssProps);
    const innerValueCssProps = ref(props.valueCssProps);
    const innerUnitCssProps = ref(props.unitCssProps);
    let triggerInnerWatch = true;
    watch(innerLabelCssProps, (v) => {
      if (!triggerInnerWatch)
        return;
      props.setCssProps(__spreadValues({}, v), LabelValuePart.Label);
    }, {
      deep: true
    });
    watch(innerValueCssProps, (v) => {
      if (!triggerInnerWatch)
        return;
      props.setCssProps(__spreadValues({}, v), LabelValuePart.Value);
    }, {
      deep: true
    });
    watch(innerUnitCssProps, (v) => {
      if (!triggerInnerWatch)
        return;
      props.setCssProps(__spreadValues({}, v), LabelValuePart.Unit);
    }, {
      deep: true
    });
    watch(() => props.labelCssProps, (v) => {
      triggerInnerWatch = false;
      innerLabelCssProps.value = v;
      nextTick(() => {
        triggerInnerWatch = true;
      });
    });
    watch(() => props.valueCssProps, (v) => {
      triggerInnerWatch = false;
      innerValueCssProps.value = v;
      nextTick(() => {
        triggerInnerWatch = true;
      });
    });
    watch(() => props.unitCssProps, (v) => {
      triggerInnerWatch = false;
      innerUnitCssProps.value = v;
      nextTick(() => {
        triggerInnerWatch = true;
      });
    });
    function removeBySlotName(arr, slotName) {
      const index2 = arr.findIndex((el) => el.slotName === slotName);
      if (index2 >= 0) {
        arr.splice(index2, 1);
      }
    }
    const data = computed(() => {
      const re = [
        { name: "\u7ED1\u5B9A\u6570\u636E\u952E\u503C", slotName: "dataKey" },
        { name: "\u9690\u85CF", slotName: "hide" },
        { name: "label\u5B57\u4F53", slotName: "labelCssProps" },
        { name: "value\u5B57\u4F53", slotName: "valueCssProps" },
        { name: "unit\u5B57\u4F53", slotName: "unitCssProps" },
        { name: "\u65CB\u8F6C\u89D2\u5EA6(\u987A\u65F6\u9488\u65B9\u5411)", value: Math.round(props.rotate), unit: "\xB0", slotName: "rotate" },
        { name: "\u5E03\u5C40\u65B9\u5411", slotName: "position" }
      ];
      if (props.hideLabel) {
        removeBySlotName(re, "labelCssProps");
      }
      if (props.hideValue) {
        removeBySlotName(re, "valueCssProps");
        removeBySlotName(re, "unitCssProps");
      }
      if (props.hideUnit) {
        removeBySlotName(re, "unitCssProps");
      }
      return re;
    });
    function changeDataKey(e) {
      props.setDataKey(e.target.value);
    }
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$n, {
        title: "\u6570\u636E\u70B9",
        data: unref(data)
      }, {
        dataKey: withCtx(() => [
          createElementVNode("input", {
            value: __props.dataKey,
            type: "text",
            class: "vc-border vc-border-gray-400 vc-border-solid vc-rounded vc-py-1 vc-px-2 focus:vc-outline-blue",
            onInput: changeDataKey
          }, null, 40, _hoisted_1$d)
        ]),
        rotate: withCtx(() => [
          createElementVNode("button", {
            class: "vc-btn vc-mr-2",
            onClick: _cache[0] || (_cache[0] = ($event) => __props.setRotate(0))
          }, "\u91CD\u7F6E"),
          createElementVNode("button", {
            class: "vc-btn",
            title: "\u987A\u65F6\u9488\u65CB\u8F6C90\xB0",
            onClick: _cache[1] || (_cache[1] = ($event) => __props.setRotate(unref(clockwise90)(__props.rotate)))
          }, [
            createVNode(_sfc_main$v, { name: "rotate" })
          ])
        ]),
        hide: withCtx(() => [
          !__props.hideValue ? (openBlock(), createElementBlock("button", {
            key: 0,
            class: "vc-btn",
            onClick: _cache[2] || (_cache[2] = ($event) => __props.setPartHide(!__props.hideLabel, unref(LabelValuePart).Label))
          }, toDisplayString(__props.hideLabel ? "\u663E\u793Alabel" : "\u9690\u85CFlabel"), 1)) : createCommentVNode("", true),
          !__props.hideLabel ? (openBlock(), createElementBlock("button", {
            key: 1,
            class: "vc-btn",
            onClick: _cache[3] || (_cache[3] = ($event) => __props.setPartHide(!__props.hideValue, unref(LabelValuePart).Value))
          }, toDisplayString(__props.hideValue ? "\u663E\u793Avalue" : "\u9690\u85CFvalue"), 1)) : createCommentVNode("", true),
          !__props.hideValue ? (openBlock(), createElementBlock("button", {
            key: 2,
            class: "vc-btn",
            onClick: _cache[4] || (_cache[4] = ($event) => __props.setPartHide(!__props.hideUnit, unref(LabelValuePart).Unit))
          }, toDisplayString(__props.hideValue ? "\u663E\u793Aunit" : "\u9690\u85CFunit"), 1)) : createCommentVNode("", true)
        ]),
        labelCssProps: withCtx(() => [
          createVNode(_sfc_main$h, {
            value: innerLabelCssProps.value,
            "onUpdate:value": _cache[5] || (_cache[5] = ($event) => innerLabelCssProps.value = $event)
          }, null, 8, ["value"])
        ]),
        valueCssProps: withCtx(() => [
          createVNode(_sfc_main$h, {
            value: innerValueCssProps.value,
            "onUpdate:value": _cache[6] || (_cache[6] = ($event) => innerValueCssProps.value = $event)
          }, null, 8, ["value"])
        ]),
        unitCssProps: withCtx(() => [
          createVNode(_sfc_main$h, {
            value: innerUnitCssProps.value,
            "onUpdate:value": _cache[7] || (_cache[7] = ($event) => innerUnitCssProps.value = $event),
            "hide-bg-border": true
          }, null, 8, ["value"])
        ]),
        position: withCtx(() => [
          createElementVNode("button", {
            class: normalizeClass(["vc-btn vc-mr-2", { "vc-btn-disable": __props.hideValue || __props.position === "vertical" }]),
            disabled: __props.hideValue || __props.position === "vertical",
            onClick: _cache[8] || (_cache[8] = ($event) => __props.setPosition("vertical"))
          }, " \u5782\u76F4 ", 10, _hoisted_2$a),
          createElementVNode("button", {
            class: normalizeClass(["vc-btn", { "vc-btn-disable": __props.hideValue || __props.position === "horizontal" }]),
            disabled: __props.hideValue || __props.position === "horizontal",
            onClick: _cache[9] || (_cache[9] = ($event) => __props.setPosition("horizontal"))
          }, " \u6C34\u5E73 ", 10, _hoisted_3$7)
        ]),
        _: 1
      }, 8, ["data"]);
    };
  }
});
const _sfc_main$f = /* @__PURE__ */ defineComponent({
  props: {
    y: null,
    x: null,
    width: null,
    height: null,
    rotate: null,
    setRotate: null
  },
  setup(__props) {
    const props = __props;
    const data = computed(() => {
      return [
        { name: "\u8BBE\u5907\u5927\u5C0F", value: `${Math.round(props.width)} X ${Math.round(props.height)}` },
        { name: "\u8BBE\u5907\u5750\u6807", value: `${Math.round(props.x)} X ${Math.round(props.y)}` },
        { name: "\u65CB\u8F6C\u89D2\u5EA6(\u987A\u65F6\u9488\u65B9\u5411)", value: Math.round(props.rotate), unit: "\xB0", slotName: "rotate" }
      ];
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$n, {
        title: "\u6D41\u7A0B\u7EC4\u4EF6",
        data: unref(data)
      }, {
        rotate: withCtx(() => [
          createElementVNode("button", {
            class: "vc-btn vc-mr-2",
            onClick: _cache[0] || (_cache[0] = ($event) => __props.setRotate(0))
          }, "\u91CD\u7F6E"),
          createElementVNode("button", {
            class: "vc-btn",
            title: "\u987A\u65F6\u9488\u65CB\u8F6C90\xB0",
            onClick: _cache[1] || (_cache[1] = ($event) => __props.setRotate(unref(clockwise90)(__props.rotate)))
          }, [
            createVNode(_sfc_main$v, { name: "rotate" })
          ])
        ]),
        _: 1
      }, 8, ["data"]);
    };
  }
});
var AttrPanelType;
(function(AttrPanelType2) {
  AttrPanelType2[AttrPanelType2["Svg"] = 0] = "Svg";
  AttrPanelType2[AttrPanelType2["Device"] = 1] = "Device";
  AttrPanelType2[AttrPanelType2["PipePath"] = 2] = "PipePath";
  AttrPanelType2[AttrPanelType2["Multiple"] = 3] = "Multiple";
  AttrPanelType2[AttrPanelType2["LabelValue"] = 4] = "LabelValue";
  AttrPanelType2[AttrPanelType2["FlowPath"] = 5] = "FlowPath";
})(AttrPanelType || (AttrPanelType = {}));
const _sfc_main$e = /* @__PURE__ */ defineComponent({
  props: {
    curSelectData: null,
    updatePanelOptions: null
  },
  setup(__props) {
    const props = __props;
    const { deviceSvgData, deviceImageData, pipePathData, labelValueData, svgWidth, svgHeight, flowPathData } = inject(RootCommonKey);
    const attrPanelType = ref(AttrPanelType.Svg);
    const devicePanelInfo = ref();
    const pipePathPanelInfo = ref();
    const multipleInfo = ref();
    const labelValuePanelInfo = ref();
    const flowPathPanelInfo = ref();
    watch(() => props.curSelectData, (data) => {
      if (data.length > 0) {
        if (data.length === 1) {
          if (data[0].getDeviceInfo) {
            attrPanelType.value = AttrPanelType.Device;
            devicePanelInfo.value = data[0].getDeviceInfo();
          } else if (data[0].getPipePathInfo) {
            attrPanelType.value = AttrPanelType.PipePath;
            pipePathPanelInfo.value = data[0].getPipePathInfo();
          } else if (data[0].getLabelValueInfo) {
            attrPanelType.value = AttrPanelType.LabelValue;
            labelValuePanelInfo.value = data[0].getLabelValueInfo();
          } else if (data[0].getFlowPathInfo) {
            attrPanelType.value = AttrPanelType.FlowPath;
            flowPathPanelInfo.value = data[0].getFlowPathInfo();
          }
        } else {
          attrPanelType.value = AttrPanelType.Multiple;
          let deviceNum = 0;
          let pipePathNum = 0;
          let labelValueNum = 0;
          let flowPathNum = 0;
          data.forEach((el) => {
            if (el.getPipePathInfo) {
              pipePathNum++;
            } else if (el.getDeviceInfo) {
              deviceNum++;
            } else if (el.getLabelValueInfo) {
              labelValueNum++;
            } else if (el.getFlowPathInfo) {
              flowPathNum++;
            }
          });
          multipleInfo.value = {
            pipePathNum,
            deviceNum,
            labelValueNum,
            flowPathNum
          };
        }
      } else {
        attrPanelType.value = AttrPanelType.Svg;
      }
    }, {
      deep: true
    });
    watch(() => props.updatePanelOptions, (options) => {
      if (options) {
        const { type, panelInfo } = options;
        switch (type) {
          case ConfigurationType.DeviceImage:
          case ConfigurationType.DeviceSvg:
            if (devicePanelInfo.value) {
              Object.assign(devicePanelInfo.value, panelInfo);
            }
            break;
          case ConfigurationType.PipePath:
            if (pipePathPanelInfo.value) {
              Object.assign(pipePathPanelInfo.value, panelInfo);
            }
            break;
          case ConfigurationType.LabelValue:
            if (labelValuePanelInfo.value) {
              Object.assign(labelValuePanelInfo.value, panelInfo);
            }
            break;
          case ConfigurationType.FlowPath:
            if (flowPathPanelInfo.value) {
              Object.assign(flowPathPanelInfo.value, panelInfo);
            }
            break;
        }
      }
    });
    return (_ctx, _cache) => {
      return attrPanelType.value === unref(AttrPanelType).Svg ? (openBlock(), createBlock(_sfc_main$m, {
        key: 0,
        "device-svg-num": unref(deviceSvgData).length,
        "device-image-num": unref(deviceImageData).length,
        "pipe-path-num": unref(pipePathData).length,
        "label-value-num": unref(labelValueData).length,
        "flow-path-num": unref(flowPathData).length,
        "svg-height": unref(svgHeight),
        "svg-width": unref(svgWidth)
      }, null, 8, ["device-svg-num", "device-image-num", "pipe-path-num", "label-value-num", "flow-path-num", "svg-height", "svg-width"])) : attrPanelType.value === unref(AttrPanelType).Device && devicePanelInfo.value ? (openBlock(), createBlock(_sfc_main$l, normalizeProps(mergeProps({ key: 1 }, devicePanelInfo.value)), null, 16)) : attrPanelType.value === unref(AttrPanelType).Multiple && multipleInfo.value ? (openBlock(), createBlock(_sfc_main$k, normalizeProps(mergeProps({ key: 2 }, multipleInfo.value)), null, 16)) : attrPanelType.value === unref(AttrPanelType).LabelValue && labelValuePanelInfo.value ? (openBlock(), createBlock(_sfc_main$g, normalizeProps(mergeProps({ key: 3 }, labelValuePanelInfo.value)), null, 16)) : attrPanelType.value === unref(AttrPanelType).PipePath && pipePathPanelInfo.value ? (openBlock(), createBlock(_sfc_main$i, normalizeProps(mergeProps({ key: 4 }, pipePathPanelInfo.value)), null, 16)) : attrPanelType.value === unref(AttrPanelType).FlowPath && flowPathPanelInfo.value ? (openBlock(), createBlock(_sfc_main$f, normalizeProps(mergeProps({ key: 5 }, flowPathPanelInfo.value)), null, 16)) : createCommentVNode("", true);
    };
  }
});
const _hoisted_1$c = { class: "vc-flex vc-flex-row vc-items-center vc-mb-3" };
const _hoisted_2$9 = { class: "vc-w-28 vc-text-right" };
const _hoisted_3$6 = { class: "vc-flex-1 vc-pl-2" };
const _sfc_main$d = /* @__PURE__ */ defineComponent({
  props: {
    label: null
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$c, [
        createElementVNode("div", _hoisted_2$9, toDisplayString(__props.label), 1),
        createElementVNode("div", _hoisted_3$6, [
          renderSlot(_ctx.$slots, "default")
        ])
      ]);
    };
  }
});
const _hoisted_1$b = { class: "inline-block" };
const _hoisted_2$8 = ["disabled"];
const _sfc_main$c = /* @__PURE__ */ defineComponent({
  props: {
    value: null
  },
  emits: ["update:value"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const enable = ref(props.value !== null);
    const limitValue = ref(props.value || 0);
    watch([enable, limitValue], (vs) => {
      if (vs[0]) {
        emits("update:value", vs[1] || 0);
      } else {
        emits("update:value", null);
      }
    });
    watch(() => props.value, (v) => {
      if (v === null) {
        enable.value = false;
      } else {
        enable.value = true;
        limitValue.value = v;
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("span", _hoisted_1$b, [
        withDirectives(createElementVNode("input", {
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => enable.value = $event),
          type: "checkbox",
          class: "vc-w-5 vc-h-5 vc-inline-block vc-align-middle vc-mr-2"
        }, null, 512), [
          [vModelCheckbox, enable.value]
        ]),
        withDirectives(createElementVNode("input", {
          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => limitValue.value = $event),
          type: "number",
          class: "vc-border vc-border-solid vc-border-gray-300 vc-align-middle vc-px-1 vc-py-0.5 vc-w-16 vc-rounded",
          disabled: !enable.value
        }, null, 8, _hoisted_2$8), [
          [vModelText, limitValue.value]
        ])
      ]);
    };
  }
});
const _hoisted_1$a = /* @__PURE__ */ createElementVNode("div", { class: "vc-text-xl vc-font-semibold vc-py-2" }, "label\u5B57\u4F53", -1);
const _hoisted_2$7 = /* @__PURE__ */ createElementVNode("div", { class: "vc-text-xl vc-font-semibold vc-py-2" }, "value\u5B57\u4F53", -1);
const _sfc_main$b = /* @__PURE__ */ defineComponent({
  props: {
    compInstance: null
  },
  setup(__props, { expose }) {
    const props = __props;
    const originalProps = props.compInstance.getOriginalProps();
    const labelCssProps = ref(originalProps.labelCssProps);
    const valueCssProps = ref(originalProps.valueCssProps);
    watch([labelCssProps, valueCssProps], ([v1, v2]) => {
      if (props.compInstance && props.compInstance.previewCondition) {
        props.compInstance.previewCondition({
          labelCssProps: v1,
          valueCssProps: v2
        });
      }
    }, {
      deep: true
    });
    const myExpose = {
      clear() {
      },
      setCondition(condition) {
        labelCssProps.value = condition.labelCssProps ? __spreadValues({}, condition.labelCssProps) : {};
        valueCssProps.value = condition.valueCssProps ? __spreadValues({}, condition.valueCssProps) : {};
      },
      getSetResult() {
        return {
          labelCssProps: __spreadValues({}, labelCssProps.value),
          valueCssProps: __spreadValues({}, valueCssProps.value)
        };
      }
    };
    expose(myExpose);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        _hoisted_1$a,
        createVNode(_sfc_main$h, {
          value: labelCssProps.value,
          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => labelCssProps.value = $event),
          "enable-empty-style": true
        }, null, 8, ["value"]),
        _hoisted_2$7,
        createVNode(_sfc_main$h, {
          value: valueCssProps.value,
          "onUpdate:value": _cache[1] || (_cache[1] = ($event) => valueCssProps.value = $event),
          "enable-empty-style": true
        }, null, 8, ["value"])
      ], 64);
    };
  }
});
const _sfc_main$a = /* @__PURE__ */ defineComponent({
  props: {
    compInstance: null
  },
  setup(__props, { expose }) {
    const props = __props;
    const originalProps = props.compInstance.getOriginalProps();
    const isFloating = ref(originalProps.isFloating);
    const isReverse = ref(originalProps.isReverse);
    const pipePathStyle = ref(originalProps.pipePathStyle);
    const type = ref(originalProps.type);
    const speed = ref(originalProps.speed);
    watch([isFloating, isReverse, speed], (values) => {
      props.compInstance.previewCondition({
        isFloating: values[0],
        isReverse: values[1],
        speed: values[2]
      });
    });
    watch(pipePathStyle, (v) => {
      props.compInstance.previewCondition({
        pipePathStyle: v
      });
    });
    const myExpose = {
      clear() {
      },
      setCondition(condition) {
        condition.pipePathStyle && (pipePathStyle.value = condition.pipePathStyle);
        condition.isFloating !== void 0 && (isFloating.value = condition.isFloating);
        condition.isReverse !== void 0 && (isReverse.value = condition.isReverse);
        condition.speed !== void 0 && (speed.value = condition.speed);
      },
      getSetResult() {
        return {
          isReverse: isReverse.value,
          isFloating: isFloating.value,
          pipePathStyle: pipePathStyle.value,
          speed: speed.value
        };
      }
    };
    expose(myExpose);
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$j, {
        isFloating: isFloating.value,
        "onUpdate:isFloating": _cache[0] || (_cache[0] = ($event) => isFloating.value = $event),
        isReverse: isReverse.value,
        "onUpdate:isReverse": _cache[1] || (_cache[1] = ($event) => isReverse.value = $event),
        pipePathStyle: pipePathStyle.value,
        "onUpdate:pipePathStyle": _cache[2] || (_cache[2] = ($event) => pipePathStyle.value = $event),
        speed: speed.value,
        "onUpdate:speed": _cache[3] || (_cache[3] = ($event) => speed.value = $event),
        type: type.value
      }, null, 8, ["isFloating", "isReverse", "pipePathStyle", "speed", "type"]);
    };
  }
});
var AnimateClass;
(function(AnimateClass2) {
  AnimateClass2["blink"] = "vc-animate-blink";
})(AnimateClass || (AnimateClass = {}));
const _hoisted_1$9 = /* @__PURE__ */ createElementVNode("div", { class: "vc-text-xl vc-font-semibold vc-py-2" }, "\u52A8\u753B", -1);
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
  props: {
    compInstance: null
  },
  setup(__props, { expose }) {
    const props = __props;
    const curAnimateClass = ref("");
    function selectClass(cls) {
      curAnimateClass.value = curAnimateClass.value === cls ? "" : cls;
      previewCondition({
        animateClass: curAnimateClass.value
      });
    }
    function previewCondition(condition) {
      if (props.compInstance && props.compInstance.previewCondition) {
        props.compInstance.previewCondition(condition);
      }
    }
    const myExpose = {
      clear() {
      },
      setCondition(condition) {
      },
      getSetResult() {
        return false;
      }
    };
    expose(myExpose);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        _hoisted_1$9,
        createElementVNode("div", null, [
          createElementVNode("button", {
            class: normalizeClass(["vc-btn vc-mr-1", { "vc-btn-blue": curAnimateClass.value === unref(AnimateClass).blink }]),
            onClick: _cache[0] || (_cache[0] = ($event) => selectClass(unref(AnimateClass).blink))
          }, " \u95EA\u70C1 ", 2)
        ])
      ], 64);
    };
  }
});
const _hoisted_1$8 = { key: 0 };
const _hoisted_2$6 = { class: "vc-text-lg vc-font-semibold vc-text-center vc-py-2 vc-mb-2 vc-border-b vc-border-solid vc-border-gray-300" };
const _hoisted_3$5 = { class: "vc-p-2" };
const _hoisted_4$4 = ["value"];
const _hoisted_5$3 = { class: "vc-text-center vc-py-2" };
const _hoisted_6$3 = { key: 1 };
const _hoisted_7$3 = { class: "vc-pb-2" };
const _hoisted_8$2 = {
  key: 0,
  class: "vc-text-xs"
};
const _hoisted_9$2 = { class: "vc-text-sm vc-text-blue-600 vc-font-semibold" };
const _hoisted_10$1 = {
  key: 1,
  class: "vc-text-xs"
};
const _hoisted_11$1 = { class: "vc-text-right" };
const _hoisted_12$1 = ["onClick"];
const _hoisted_13$1 = ["onClick"];
const _hoisted_14 = ["onClick"];
const _hoisted_15 = {
  key: 2,
  class: "vc-text-center vc-text-lg vc-text-gray-500 vc-pt-16 vc-px-2"
};
const _hoisted_16 = { key: 0 };
const _hoisted_17 = { key: 1 };
const _hoisted_18 = /* @__PURE__ */ createTextVNode(" \u6682\u65E0\u6761\u4EF6\u6570\u636E\uFF0C\u8BF7\u5148 ");
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
  props: {
    curSelectData: null
  },
  setup(__props, { expose }) {
    const props = __props;
    const emptyMes = ref("\u8BF7\u70B9\u51FB\u9009\u62E9\u7EC4\u4EF6");
    const { compInstance } = inject(RootCommonKey);
    function getDataKeys() {
      const dataKeys = [];
      for (const id in compInstance) {
        const ins = compInstance[id];
        if (ins && ins.getDataKey) {
          const key = ins.getDataKey();
          if (key) {
            dataKeys.push(key);
          }
        }
      }
      return dataKeys;
    }
    function handleSelectDataChange(data) {
      reset();
      if (data.length > 0) {
        if (data.length === 1) {
          const item = data[0];
          const keys2 = getDataKeys();
          if (keys2.length === 0) {
            emptyMes.value = "\u6682\u65E0\u5DF2\u7ED1\u5B9A\u6570\u636E\u952E\u503C\u7684\u6570\u636E\u70B9\u7EC4\u4EF6\uFF0C\u8BF7\u5148\u6DFB\u52A0";
          } else {
            curDataKeys.value = keys2;
            if (item.type === ConfigurationType.LabelValue || item.type === ConfigurationType.PipePath) {
              emptyMes.value = "";
              const ins = compInstance[item.id];
              if (ins.getConditionData) {
                curIns.value = ins;
                curInsType.value = item.type;
                conditionData.value = ins.getConditionData();
              }
            } else {
              emptyMes.value = "\u8BE5\u7EC4\u4EF6\u6682\u4E0D\u652F\u6301\u7ED1\u5B9A\u6761\u4EF6";
            }
          }
        } else {
          emptyMes.value = "\u8BF7\u9009\u62E9\u5355\u4E2A\u7EC4\u4EF6";
        }
      } else {
        emptyMes.value = "\u8BF7\u70B9\u51FB\u9009\u62E9\u7EC4\u4EF6";
      }
    }
    watch(() => props.curSelectData, handleSelectDataChange, {
      deep: true
    });
    function reset() {
      if (curIns.value && curIns.value.restoreCondition) {
        curIns.value.restoreCondition();
        curIns.value = null;
      }
      conditionWinVisible.value = false;
      conditionData.value = [];
    }
    const curIns = ref(null);
    const curSetPropsIns = ref();
    const curInsType = ref(ConfigurationType.LabelValue);
    let curCondition = null;
    const conditionData = ref([]);
    function delCondition(index2) {
      conditionData.value.splice(index2, 1);
    }
    function editCondition(el) {
      conditionWinTitle.value = "\u7F16\u8F91\u6761\u4EF6";
      curCondition = el;
      selDataKey.value = el.dataKey;
      upperLimit.value = el.max;
      lowerLimit.value = el.min;
      conditionWinVisible.value = true;
      nextTick(() => {
        var _a2;
        (_a2 = curSetPropsIns.value) == null ? void 0 : _a2.setCondition(el);
      });
    }
    function copyCondition(el) {
      conditionWinTitle.value = "\u590D\u5236\u6761\u4EF6";
      curCondition = null;
      selDataKey.value = el.dataKey;
      upperLimit.value = el.max;
      lowerLimit.value = el.min;
      conditionWinVisible.value = true;
      nextTick(() => {
        var _a2;
        (_a2 = curSetPropsIns.value) == null ? void 0 : _a2.setCondition(el);
      });
    }
    const curDataKeys = ref([]);
    const conditionWinVisible = ref(false);
    watch(conditionWinVisible, (v) => {
      if (!v) {
        if (curIns.value && curIns.value.restoreCondition) {
          curIns.value.restoreCondition();
        }
      }
    });
    const conditionWinTitle = ref("");
    function showAddConditionDialog() {
      conditionWinTitle.value = "\u65B0\u589E\u6761\u4EF6";
      selDataKey.value = curDataKeys.value[0];
      curCondition = null;
      upperLimit.value = 0;
      lowerLimit.value = 0;
      conditionWinVisible.value = true;
    }
    const selDataKey = ref("");
    const upperLimit = ref(0);
    const lowerLimit = ref(0);
    function saveCondition() {
      if (lowerLimit.value !== null && upperLimit.value !== null && upperLimit.value < lowerLimit.value) {
        return alert("\u4E0A\u9650\u503C\u4E0D\u80FD\u5C0F\u4E8E\u4E0B\u9650\u503C");
      }
      if (!curSetPropsIns.value)
        return;
      const re = curSetPropsIns.value.getSetResult();
      if (!re)
        return;
      const condition = __spreadValues({
        id: buildShortUUID("condition"),
        dataKey: selDataKey.value,
        min: lowerLimit.value,
        max: upperLimit.value
      }, re);
      if (curCondition) {
        Object.assign(curCondition, condition);
      } else {
        conditionData.value.push(condition);
      }
      conditionWinVisible.value = false;
    }
    const myExpose = {
      refresh() {
        handleSelectDataChange(props.curSelectData);
      }
    };
    expose(myExpose);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", null, [
        conditionWinVisible.value ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
          createElementVNode("div", _hoisted_2$6, toDisplayString(conditionWinTitle.value), 1),
          createElementVNode("div", _hoisted_3$5, [
            createVNode(_sfc_main$d, { label: "\u5173\u8054\u6570\u636E\u952E\u503C" }, {
              default: withCtx(() => [
                withDirectives(createElementVNode("select", {
                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selDataKey.value = $event),
                  class: "vc-border vc-border-solid vc-border-gray-300 vc-rounded vc-px-1 vc-py-0.5"
                }, [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(curDataKeys.value, (key) => {
                    return openBlock(), createElementBlock("option", {
                      key,
                      value: key
                    }, toDisplayString(key), 9, _hoisted_4$4);
                  }), 128))
                ], 512), [
                  [vModelSelect, selDataKey.value]
                ])
              ]),
              _: 1
            }),
            createVNode(_sfc_main$d, {
              label: "\u4E0B\u9650",
              class: "mb-0"
            }, {
              default: withCtx(() => [
                createVNode(_sfc_main$c, {
                  value: lowerLimit.value,
                  "onUpdate:value": _cache[1] || (_cache[1] = ($event) => lowerLimit.value = $event)
                }, null, 8, ["value"])
              ]),
              _: 1
            }),
            createVNode(_sfc_main$d, { label: "\u4E0A\u9650" }, {
              default: withCtx(() => [
                createVNode(_sfc_main$c, {
                  value: upperLimit.value,
                  "onUpdate:value": _cache[2] || (_cache[2] = ($event) => upperLimit.value = $event)
                }, null, 8, ["value"])
              ]),
              _: 1
            }),
            curIns.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
              curInsType.value === unref(ConfigurationType).LabelValue ? (openBlock(), createBlock(_sfc_main$b, {
                key: 0,
                ref: (_value, _refs) => {
                  _refs["curSetPropsIns"] = _value;
                  curSetPropsIns.value = _value;
                },
                "comp-instance": curIns.value
              }, null, 8, ["comp-instance"])) : curInsType.value === unref(ConfigurationType).PipePath ? (openBlock(), createBlock(_sfc_main$a, {
                key: 1,
                ref: (_value, _refs) => {
                  _refs["curSetPropsIns"] = _value;
                  curSetPropsIns.value = _value;
                },
                "comp-instance": curIns.value
              }, null, 8, ["comp-instance"])) : createCommentVNode("", true),
              createVNode(_sfc_main$9, { "comp-instance": curIns.value }, null, 8, ["comp-instance"])
            ], 64)) : createCommentVNode("", true)
          ]),
          createElementVNode("div", _hoisted_5$3, [
            createElementVNode("button", {
              class: "vc-btn vc-btn-lg vc-mr-2",
              onClick: _cache[3] || (_cache[3] = ($event) => conditionWinVisible.value = false)
            }, "\u53D6\u6D88"),
            createElementVNode("button", {
              class: "vc-btn vc-btn-lg vc-btn-blue",
              onClick: saveCondition
            }, "\u786E\u5B9A")
          ])
        ])) : !emptyMes.value && conditionData.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(conditionData.value, (el, i) => {
            return openBlock(), createElementBlock("div", {
              key: el.id,
              class: "vc-p-2 vc-pr-0 vc-border-b vc-border-solid vc-border-gray-300 hover:vc-bg-gray-100"
            }, [
              createElementVNode("div", _hoisted_7$3, [
                el.min !== null ? (openBlock(), createElementBlock("span", _hoisted_8$2, toDisplayString(el.min) + " <= ", 1)) : createCommentVNode("", true),
                createElementVNode("span", _hoisted_9$2, toDisplayString(el.dataKey), 1),
                el.max !== null ? (openBlock(), createElementBlock("span", _hoisted_10$1, " <= " + toDisplayString(el.max), 1)) : createCommentVNode("", true)
              ]),
              createElementVNode("div", _hoisted_11$1, [
                createElementVNode("span", {
                  class: "vc-cursor-pointer active:vc-text-gray-400 vc-px-2 active:vc-opacity-80 vc-inline-block",
                  onClick: ($event) => copyCondition(el)
                }, [
                  createVNode(_sfc_main$v, { name: "copy" })
                ], 8, _hoisted_12$1),
                createElementVNode("span", {
                  class: "vc-cursor-pointer active:vc-text-gray-400 vc-px-2 active:vc-opacity-80 vc-inline-block",
                  onClick: ($event) => editCondition(el)
                }, [
                  createVNode(_sfc_main$v, { name: "edit" })
                ], 8, _hoisted_13$1),
                createElementVNode("span", {
                  class: "vc-cursor-pointer active:vc-text-gray-400 vc-px-2 active:vc-opacity-80 vc-inline-block",
                  onClick: ($event) => delCondition(i)
                }, [
                  createVNode(_sfc_main$v, { name: "delete" })
                ], 8, _hoisted_14)
              ])
            ]);
          }), 128)),
          createElementVNode("div", { class: "vc-py-2 vc-text-center" }, [
            createElementVNode("button", {
              class: "vc-btn vc-btn-xl",
              onClick: showAddConditionDialog
            }, "\u589E\u52A0\u6761\u4EF6")
          ])
        ])) : (openBlock(), createElementBlock("div", _hoisted_15, [
          emptyMes.value ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(emptyMes.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_17, [
            _hoisted_18,
            createElementVNode("a", {
              class: "vc-text-blue-500 vc-font-semibold vc-cursor-pointer",
              onClick: showAddConditionDialog
            }, "\u6DFB\u52A0")
          ]))
        ]))
      ]);
    };
  }
});
const _hoisted_1$7 = ["d"];
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
  props: {
    width: {
      required: true,
      type: Number
    },
    height: {
      required: true,
      type: Number
    },
    shares: {
      required: true,
      type: Number
    }
  },
  setup(__props, { expose }) {
    const props = __props;
    const strokeWidth = 1;
    const data = computed(() => {
      const lineNum = props.shares - 1;
      const perWidth = (props.width - lineNum * strokeWidth) / props.shares;
      const result = [];
      for (let i = 0; i < props.shares - 1; i++) {
        const x = Math.round((i + 1) * perWidth + i * strokeWidth);
        result.push({ d: `M${x} 0L${x} ${props.height}` });
      }
      const perHeight = (props.height - lineNum * strokeWidth) / props.shares;
      for (let i = 0; i < props.shares - 1; i++) {
        const y = Math.round((i + 1) * perHeight + i * strokeWidth);
        result.push({ d: `M0 ${y}L${props.width} ${y}` });
      }
      return result;
    });
    const gEl = ref();
    const myExpose = {
      getEl() {
        return gEl.value;
      }
    };
    expose(myExpose);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("g", {
        ref: (_value, _refs) => {
          _refs["gEl"] = _value;
          gEl.value = _value;
        },
        "stroke-dasharray": "3 3",
        stroke: "#c0c0c0",
        "stroke-miterlimit": "10",
        fill: "none",
        "stroke-width": strokeWidth
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(data), (el) => {
          return openBlock(), createElementBlock("path", {
            key: el.d,
            d: el.d
          }, null, 8, _hoisted_1$7);
        }), 128))
      ], 512);
    };
  }
});
const TEXT2PATH = 6;
function usePipePathText({ points, pipeSize, innerPipeSize }) {
  const textData = ref([]);
  function findPartPathByPoint(p) {
    for (let i = 0; i < points.length - 1; i++) {
      const pp1 = points[i];
      const pp2 = points[i + 1];
      const { p1, p2, p3 } = getRectPointsBy2SideCenterPoint(pp1, pp2, pipeSize.value + 2);
      if (isPointInRect(p, p1, p2, p3)) {
        return i;
      }
    }
    return 0;
  }
  function getTextRefByPoint(p) {
    const index2 = findPartPathByPoint(p);
    const p1 = points[index2];
    const p2 = points[index2 + 1];
    if (p1.bindTextIds && p2.bindTextIds) {
      let targetTextId = "";
      for (let i = 0; i < p1.bindTextIds.length; i++) {
        if (p2.bindTextIds.indexOf(p1.bindTextIds[i]) !== -1) {
          targetTextId = p1.bindTextIds[i];
          break;
        }
      }
      return textData.value.find((el) => el.id === targetTextId);
    }
  }
  async function setTextByPoint(p) {
    const index2 = findPartPathByPoint(p);
    const arr = [index2, index2 + 1];
    let curText = textData.value.find((el) => el.startIndex === arr[0] && el.endIndex === arr[1]);
    if (!curText) {
      const id = buildShortUUID();
      addTextIdToPoint(points[arr[0]], id);
      addTextIdToPoint(points[arr[1]], id);
      textData.value.push({
        id,
        startIndex: arr[0],
        endIndex: arr[1],
        value: "",
        width: 0,
        height: TextFontSzie,
        position: TextPosition.Top,
        editable: false
      });
      await nextTick();
      curText = textData.value[textData.value.length - 1];
    }
    curText.editable = true;
  }
  function getTextPosition(el) {
    const p1 = points[el.startIndex];
    const p2 = points[el.endIndex];
    const isTop = el.position === TextPosition.Top;
    const distance = (pipeSize.value - innerPipeSize.value) / 2 + TEXT2PATH + (isTop ? el.height : 0);
    const targetP = getVerticalDitancePointByPoint(p1, p2, { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 }, distance, isTop);
    return {
      transform: `rotate(${getAngelByP1P2AndXaxis(points[el.startIndex], points[el.endIndex])} ${targetP.x},${targetP.y})`,
      x: targetP.x - el.width / 2,
      y: targetP.y
    };
  }
  function addTextIdToPoint(p, id) {
    if (!p.bindTextIds) {
      p.bindTextIds = [];
    }
    p.bindTextIds.push(id);
  }
  function removeTextId(index2, key) {
    const p = points[index2];
    if (p && p.bindTextIds) {
      const index22 = p.bindTextIds.findIndex((el) => el === key);
      if (index22 !== -1) {
        p.bindTextIds.splice(index22, 1);
      }
    }
  }
  function delTextByIndex(index2) {
    const p = points[index2];
    if (p.bindTextIds) {
      p.bindTextIds.forEach((key) => {
        textData.value.forEach((el, j) => {
          if (el.id === key) {
            textData.value.splice(j, 1);
            return false;
          }
        });
        removeTextId(index2 - 1, key);
        removeTextId(index2 + 1, key);
      });
    }
  }
  return {
    textData,
    textHandlers: {
      findPartPathByPoint,
      setTextByPoint,
      getTextPosition,
      delTextByIndex,
      getTextRefByPoint
    }
  };
}
var PipePath_vue_vue_type_style_index_0_lang = "";
const _hoisted_1$6 = ["data-x", "data-y"];
const _hoisted_2$5 = ["d", "stroke"];
const _hoisted_3$4 = ["d", "stroke"];
const _hoisted_4$3 = ["d", "stroke-dasharray", "stroke"];
const _hoisted_5$2 = ["dur"];
const _hoisted_6$2 = ["x", "y", "width", "height"];
const _hoisted_7$2 = ["x", "y", "width", "height", "onMousedown", "onContextmenu"];
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
  props: {
    id: null,
    index: null,
    centerX: null,
    centerY: null,
    colors: null,
    pipeComposeData: null,
    scaleFactor: null,
    type: null
  },
  setup(__props, { expose }) {
    const props = __props;
    const compCommon = inject(CompCommonKey);
    const isEditor = compCommon.isEditor;
    const svgInfo = compCommon.getSvgInfo();
    function pathDblclick(e) {
      if (isEditor.value) {
        e.preventDefault();
        e.stopPropagation();
        textHandlers.setTextByPoint({
          x: e.offsetX,
          y: e.offsetY
        });
      }
    }
    const { innerPipeSize, operSize, pipeSize, points, d, outerOpacity, pipeComposeSize, pipeComposeData } = usePipePath({
      containerHeight: SvgHeight * props.scaleFactor,
      containerWidth: SvgWidth * props.scaleFactor,
      centerX: props.centerX,
      centerY: props.centerY,
      scaleFactor: props.scaleFactor
    });
    const pipePathStyle = ref({
      innerColor: props.colors[0],
      innerSize: innerPipeSize.value,
      outerColor: props.colors[1],
      outerSize: props.type === PipePathType.flat ? pipeSize.value : pipeComposeSize.value,
      outerOpacity: outerOpacity * 100,
      dottedSize: props.type === PipePathType.flat ? 2 : 4,
      dottedMargin: props.type === PipePathType.flat ? 5 : 6
    });
    watch(() => pipePathStyle.value.outerSize, (v) => {
      let size = v - 5;
      if (size < 10) {
        size = 10;
      } else if (size > 14) {
        size = 14;
      }
      operSize.value = size;
    }, {
      immediate: true
    });
    watch(() => props.scaleFactor, (v) => {
      points.forEach((p) => {
        p.x = p._x * v;
        p.y = p._y * v;
      });
    });
    const { textData, textHandlers } = usePipePathText({
      points,
      innerPipeSize,
      pipeSize
    });
    const { dragStart: rectDragStart } = useDrag({
      start(startData) {
        let [targetPoint, i] = startData.args;
        const tX = targetPoint.x;
        const tY = targetPoint.y;
        if (compCommon.connection.isConnect(targetPoint.id)) {
          compCommon.connection.startTogether(targetPoint.id);
        } else {
          compCommon.draggingPipePathRect = targetPoint;
          selectPath();
        }
        startData.args[0] = targetPoint;
        return {
          tX,
          tY,
          dragMove: getRectDragMove(targetPoint)
        };
      },
      move({ dx, dy, startData, startResult }) {
        const targetPoint = startData.args[0];
        compCommon.connection.moveTogether(targetPoint.id, { dx, dy });
        startResult.dragMove({
          dx,
          dy,
          startData: {
            x: startResult.tX,
            y: startResult.tY
          }
        });
      },
      end({ startData, startResult }) {
        const targetPoint = startData.args[0];
        compCommon.draggingPipePathRect = null;
        if (compCommon.connectingDevice) {
          compCommon.connection.connect(targetPoint.id, compCommon.connectingDevice);
          compCommon.connection.connect(compCommon.connectingDevice.id, {
            id: targetPoint.id,
            type: ConfigurationType.PipePath,
            start() {
              return {
                x: targetPoint.x,
                y: targetPoint.y
              };
            },
            move: startResult.dragMove,
            extra: compCommon.connectingDevice.extra
          });
          compCommon.connectingDevice = null;
        } else {
          compCommon.connection.endTogether(targetPoint.id);
        }
      }
    });
    function getRectDragMove(targetPoint) {
      return function dragMove({ x, y, dx, dy, startData }) {
        if (dx !== void 0 && dy !== void 0) {
          if (!startData) {
            startData = { x: 0, y: 0 };
          }
          x = dx + startData.x;
          y = dy + startData.y;
        }
        targetPoint.x = x;
        targetPoint.y = y;
        targetPoint._x = x / props.scaleFactor;
        targetPoint._y = y / props.scaleFactor;
        if (targetPoint.overlapId) {
          points.forEach((el) => {
            if (el.overlapId === targetPoint.overlapId) {
              el.x = targetPoint.x;
              el.y = targetPoint.y;
              el._x = targetPoint._x;
              el._y = targetPoint._y;
            }
          });
        }
      };
    }
    const selected = ref(false);
    const dragX = ref(0);
    const dragY = ref(0);
    function pathStart() {
      const obj = {};
      const pointIds = [];
      points.forEach((el) => {
        const conn = compCommon.connection.getConnect(el.id);
        if (conn && conn.length > 0) {
          obj[conn[0].id] = el;
        }
        pointIds.push(el.id);
      });
      const dragTogetherPoints = [];
      for (let i in obj) {
        dragTogetherPoints.push(obj[i]);
      }
      return {
        pointIds,
        dragTogetherPoints
      };
    }
    function pathMove(options) {
      dragX.value = options.dx;
      dragY.value = options.dy;
    }
    function pathEnd() {
      points.forEach((p) => {
        p.x += dragX.value;
        p.y += dragY.value;
        p._x = p.x / props.scaleFactor;
        p._y = p.y / props.scaleFactor;
      });
      dragX.value = 0;
      dragY.value = 0;
    }
    function selectPath() {
      selected.value = true;
      compCommon.toggleSelect({
        id: props.id,
        type: ConfigurationType.PipePath,
        selected: selected.value,
        index: props.index,
        unSelect() {
          selected.value = false;
        },
        getPipePathInfo
      });
    }
    const { dragStart } = useDrag({
      unStopPropagation: !isEditor.value,
      element: svgInfo.container,
      start() {
        const result = { isDragSelect: false };
        if (isEditor.value) {
          result.isDragSelect = compCommon.multipleSelect.startTogether(props.id);
          if (!result.isDragSelect) {
            const { pointIds, dragTogetherPoints } = pathStart();
            dragTogetherPoints.forEach((el) => {
              compCommon.connection.startTogether(el.id, [...pointIds]);
            });
            result.pointIds = pointIds;
            result.dragTogetherPoints = dragTogetherPoints;
            selectPath();
          }
        }
        return result;
      },
      move({ dx, dy, startResult }) {
        if (isEditor.value) {
          if (startResult.isDragSelect) {
            compCommon.multipleSelect.moveTogether({ dx, dy });
          } else {
            pathMove({ dx, dy });
            startResult.dragTogetherPoints.forEach((el) => {
              compCommon.connection.moveTogether(el.id, { dx, dy }, [...startResult.pointIds]);
            });
          }
        }
      },
      end({ isClick, startResult }) {
        if (isEditor.value) {
          if (startResult.isDragSelect) {
            compCommon.multipleSelect.endTogether();
          } else {
            pathEnd();
            startResult.dragTogetherPoints.forEach((el) => {
              compCommon.connection.endTogether(el.id, [...startResult.pointIds]);
            });
          }
          if (isClick && startResult.isDragSelect) {
            selectPath();
          }
        }
      }
    });
    onBeforeUnmount(() => {
      if (selected.value) {
        selected.value = false;
        compCommon.toggleSelect({
          type: ConfigurationType.PipePath,
          selected: false,
          index: props.index
        });
      }
      points.forEach((p) => {
        compCommon.connection.disConnect(p.id);
      });
    });
    function addSubPath(targetPoint, i, isReverse2) {
      const lastPoint = points[i - 1];
      const nextPoint = points[i + 1];
      const nearPoint = i === points.length - 1 ? lastPoint : nextPoint;
      let newPoint = {
        x: targetPoint.x + (nearPoint.x > targetPoint.x ? -50 : 50),
        y: targetPoint.y,
        _x: targetPoint._x,
        _y: targetPoint._y,
        id: buildShortUUID()
      };
      if (targetPoint.isReverse) {
        if (targetPoint.isParentNode) {
          if (isReverse2) {
            addNewBranch(targetPoint, newPoint, !isReverse2);
          } else {
            newPoint.isReverse = true;
            newPoint.isParentNode = true;
            targetPoint.isParentNode = false;
            points.splice(i, 0, newPoint);
          }
        } else {
          addNewBranch(targetPoint, newPoint, isReverse2);
        }
      } else {
        if (i === 0 || i === points.length - 1 || nextPoint.isParentNode) {
          if (isReverse2) {
            addNewBranch(targetPoint, newPoint, i === points.length - 1);
          } else {
            if (i === points.length - 1) {
              points.push(newPoint);
            } else if (i === 0) {
              points.unshift(newPoint);
            } else {
              points.splice(i + 1, 0, newPoint);
            }
          }
        } else {
          addNewBranch(targetPoint, newPoint, isReverse2);
        }
      }
    }
    function addNewBranch(targetPoint, newPoint, isReverse2) {
      let p1, p2;
      const pNode = {
        x: targetPoint.x,
        y: targetPoint.y,
        _x: targetPoint._x,
        _y: targetPoint._y,
        isParentNode: true,
        overlapId: targetPoint.overlapId || (targetPoint.overlapId = buildShortUUID()),
        id: buildShortUUID()
      };
      if (isReverse2) {
        newPoint.isParentNode = true;
        pNode.isParentNode = false;
        newPoint.isReverse = true;
        pNode.isReverse = true;
        p1 = newPoint;
        p2 = pNode;
      } else {
        p1 = pNode;
        p2 = newPoint;
      }
      points.push(p1);
      points.push(p2);
    }
    function delParentNodeByIndex(parentNodeIndex) {
      let delNum = 1;
      let j = parentNodeIndex + 1;
      let p = points[j];
      while (p && !p.isParentNode) {
        if (p.overlapId) {
          for (let k = 0; k < points.length; k++) {
            let node = points[k];
            if (node.overlapId === p.overlapId && k !== j && node.isParentNode) {
              delParentNodeByIndex(k);
              k = 0;
            }
          }
        }
        textHandlers.delTextByIndex(j);
        delNum++;
        p = points[++j];
      }
      points.splice(parentNodeIndex, delNum);
    }
    function align() {
      points.forEach((p, i) => {
        const nextP = points[i + 1];
        if (nextP && !nextP.isParentNode) {
          const xDeg = getDegToXaxis(p, nextP);
          const oX = nextP.x;
          const oY = nextP.y;
          if (xDeg <= 45) {
            nextP.y = p.y;
            nextP._y = p._y;
          } else {
            nextP.x = p.x;
            nextP._x = p._x;
          }
          if (nextP.overlapId) {
            points.forEach((p2) => {
              if (p2.overlapId === nextP.overlapId) {
                p2.x = nextP.x;
                p2._x = nextP._x;
                p2.y = nextP.y;
                p2._y = nextP._y;
              }
            });
          }
          if (compCommon.connection.isConnect(nextP.id)) {
            compCommon.connection.startTogether(nextP.id);
            compCommon.connection.moveTogether(nextP.id, { dx: nextP.x - oX, dy: nextP.y - oY });
            compCommon.connection.endTogether(nextP.id);
          }
        }
      });
    }
    function rectContextmenu(e, p, i) {
      const isDelPath = points.length === 2;
      const menuItems = [
        {
          name: "\u589E\u52A0\u5B50\u8DEF\u5F84",
          handler() {
            addSubPath(p, i);
          }
        },
        {
          name: "\u589E\u52A0\u53CD\u5411\u5B50\u8DEF\u5F84",
          handler() {
            addSubPath(p, i, true);
          }
        },
        {
          name: isDelPath ? "\u5220\u9664\u8DEF\u5F84" : "\u5220\u9664\u5F53\u524D\u8282\u70B9",
          handler() {
            if (isDelPath) {
              compCommon.deleteCompItem(props.id);
            } else {
              if (p.isParentNode) {
                delParentNodeByIndex(i);
              } else {
                if (i > 0 && points[i - 1].isParentNode && (i === points.length - 1 || points[i + 1].isParentNode)) {
                  delParentNodeByIndex(i - 1);
                } else {
                  textHandlers.delTextByIndex(i);
                  points.splice(i, 1);
                }
              }
            }
          }
        }
      ];
      if (compCommon.connection.isConnect(p.id)) {
        menuItems.push({
          name: "\u89E3\u9664\u8FDE\u63A5",
          handler() {
            compCommon.connection.disConnect(p.id);
          }
        });
      }
      compCommon.showContextmenu(e, { data: menuItems });
    }
    function insertPoint(clickPoint) {
      const index2 = textHandlers.findPartPathByPoint(clickPoint);
      const p1 = points[index2];
      const p2 = points[index2 + 1];
      const centerPoint = {
        x: (p1.x + p2.x) / 2,
        y: (p1.y + p2.y) / 2,
        _x: (p1._x + p2._x) / 2,
        _y: (p1._y + p2._y) / 2,
        isReverse: p1.isReverse,
        id: buildShortUUID()
      };
      points.splice(index2 + 1, 0, centerPoint);
      selectPath();
    }
    const isFloating = ref(false);
    const isReverse = ref(false);
    const gEl = ref();
    function pathContextmenu(e) {
      const menuItems = [
        {
          name: "\u8BBE\u7F6E\u6587\u5B57",
          handler() {
            textHandlers.setTextByPoint({
              x: e.offsetX,
              y: e.offsetY
            });
          }
        },
        {
          name: "\u63D2\u5165\u8282\u70B9",
          handler() {
            insertPoint({
              x: e.offsetX,
              y: e.offsetY
            });
          }
        },
        {
          name: "\u6D41\u52A8",
          children: [
            {
              name: isFloating.value ? "\u505C\u6B62" : "\u5F00\u59CB",
              handler() {
                isFloating.value = !isFloating.value;
              }
            }
          ]
        },
        {
          name: "\u5BF9\u9F50",
          handler() {
            align();
          }
        },
        {
          name: showArrow.value ? "\u9690\u85CF\u7BAD\u5934" : "\u663E\u793A\u7BAD\u5934",
          handler() {
            showArrow.value = !showArrow.value;
          }
        }
      ];
      const textRef = textHandlers.getTextRefByPoint({
        x: e.offsetX,
        y: e.offsetY
      });
      if (textRef) {
        menuItems.splice(2, 0, {
          name: "\u6587\u5B57\u65B9\u5411",
          children: [
            {
              name: "\u4E0A",
              handler() {
                textRef.position = TextPosition.Top;
              }
            },
            {
              name: "\u4E0B",
              handler() {
                textRef.position = TextPosition.Bottom;
              }
            }
          ]
        });
      }
      compCommon.showContextmenu(e, { data: menuItems, id: props.id, element: gEl.value });
    }
    function setPipePathStyle(style) {
      pipePathStyle.value = style;
      if (style.outerSize) {
        pipeComposeSize.value = style.outerSize;
      }
    }
    function getPipePathInfo() {
      return {
        points,
        isFloating: isFloating.value,
        isReverse: isReverse.value,
        pipePathStyle: pipePathStyle.value,
        speed: speed.value,
        type: props.type,
        setFloating(f) {
          isFloating.value = f;
        },
        setReverse(r) {
          isReverse.value = r;
        },
        setStyle: setPipePathStyle,
        setSpeed(val) {
          speed.value = val;
        }
      };
    }
    watch([points, isFloating, isReverse], () => {
      compCommon.updatePanelInfo({
        type: ConfigurationType.PipePath,
        panelInfo: getPipePathInfo()
      });
    });
    const showArrow = ref(true);
    const arrowWidth = 14;
    const arrowHeight = 14;
    const arrowData = computed(() => {
      const data = [];
      points.forEach((p, i) => {
        const nextP = points[i + 1];
        if (nextP && !nextP.isParentNode) {
          data.push({
            x: (p.x + nextP.x) / 2,
            y: (p.y + nextP.y) / 2,
            rotate: getAngelByP1P2AndXaxis(p, nextP)
          });
        }
      });
      return data;
    });
    const speed = ref(PipePathSpeed.normal);
    const speedValue = {
      [PipePathSpeed.slow]: "7s",
      [PipePathSpeed.normal]: "5s",
      [PipePathSpeed.middle]: "3s",
      [PipePathSpeed.fast]: "1.5s"
    };
    const conditionData = ref([]);
    let originalProps = null;
    function getOriginalProps() {
      if (!originalProps) {
        return {
          isReverse: isReverse.value,
          isFloating: isFloating.value,
          speed: speed.value,
          pipePathStyle: pipePathStyle.value,
          type: props.type
        };
      }
      return originalProps;
    }
    function previewCondition(condition) {
      if (!originalProps) {
        originalProps = getOriginalProps();
      }
      condition.isReverse !== void 0 && (isReverse.value = condition.isReverse);
      condition.isFloating !== void 0 && (isFloating.value = condition.isFloating);
      condition.speed !== void 0 && (speed.value = condition.speed);
      condition.pipePathStyle !== void 0 && setPipePathStyle(condition.pipePathStyle);
    }
    function restoreCondition() {
      if (originalProps) {
        isReverse.value = originalProps.isReverse;
        isFloating.value = originalProps.isFloating;
        speed.value = originalProps.speed;
        setPipePathStyle(originalProps.pipePathStyle);
        originalProps = null;
      }
    }
    const myExpose = {
      isInBoxSelect(boxSelect) {
        for (let i = 0; i < points.length - 1; i++) {
          const p1 = points[i];
          const p2 = points[i + 1];
          if (isLineIntersectRectangle(p1.x, p1.y, p2.x, p2.y, boxSelect.x, boxSelect.y, boxSelect.x + boxSelect.width, boxSelect.y + boxSelect.height)) {
            return true;
          }
        }
        return false;
      },
      select() {
        selected.value = true;
        compCommon.toggleSelect({
          type: ConfigurationType.PipePath,
          selected: selected.value,
          index: props.index,
          unSelect() {
            selected.value = false;
          },
          multiple: true,
          id: props.id,
          drag: {
            start: pathStart,
            move: pathMove,
            end: pathEnd
          },
          getPipePathInfo
        });
      },
      toJSON() {
        const _textData = textData.value.map((el) => __spreadProps(__spreadValues({}, el), {
          initValue: el.value
        }));
        return {
          id: props.id,
          points: points.map((p) => Object.assign({}, p, { x: p._x, y: p._y })),
          textData: _textData,
          colors: props.colors || [],
          isFloating: isFloating.value,
          isReverse: isReverse.value,
          style: pipePathStyle.value,
          type: props.type,
          conditionData: conditionData.value,
          speed: speed.value,
          showArrow: showArrow.value
        };
      },
      setJSON(data) {
        points.splice(0, points.length, ...data.points);
        textData.value = data.textData;
        isFloating.value = data.isFloating;
        isReverse.value = data.isReverse;
        pipePathStyle.value = data.style;
        if (data.style.outerSize) {
          pipeComposeSize.value = data.style.outerSize;
        }
        conditionData.value = data.conditionData || [];
        speed.value = data.speed || PipePathSpeed.normal;
        showArrow.value = data.showArrow === void 0 ? true : data.showArrow;
      },
      setConnection(drag, subId) {
        const targetPoint = points.find((el) => el.id === subId.id);
        if (targetPoint) {
          drag.extra = {
            connectPositionIndex: subId.position
          };
          compCommon.connection.connect(targetPoint.id, drag);
          compCommon.connection.connect(drag.id, {
            id: targetPoint.id,
            type: ConfigurationType.PipePath,
            start() {
              return {
                x: targetPoint.x,
                y: targetPoint.y
              };
            },
            move: getRectDragMove(targetPoint),
            extra: drag.extra
          });
          return true;
        }
        return false;
      },
      handleData(data) {
        restoreCondition();
        const applyCondition = getApplyCondition(conditionData.value, data);
        if (applyCondition.length > 0) {
          applyCondition.forEach((el) => {
            previewCondition(el);
          });
        }
      },
      getConditionData() {
        return conditionData.value;
      },
      setConditionData(data) {
        conditionData.value = data;
      },
      previewCondition,
      restoreCondition,
      getDisplayInfo() {
        return {
          name: "\u7BA1\u9053"
        };
      },
      getOriginalProps,
      getBox() {
        let minX = points[0].x, minY = points[0].y, maxX = points[0].x, maxY = points[0].y;
        points.forEach((p) => {
          if (minX === void 0 || p.x < minX) {
            minX = p.x;
          }
          if (minY === void 0 || p.y < minY) {
            minY = p.y;
          }
          if (maxX === void 0 || p.x > maxX) {
            maxX = p.x;
          }
          if (maxY === void 0 || p.y > maxY) {
            maxY = p.y;
          }
        });
        return {
          x: minX,
          y: minY,
          width: maxX - minX,
          height: maxY - minY,
          maxX,
          maxY
        };
      },
      translate(dx, dy) {
        points.forEach((el) => {
          el.x = el.x + dx;
          el.y = el.y + dy;
          el._x = el.x / props.scaleFactor;
          el._y = el.y / props.scaleFactor;
        });
      }
    };
    expose(myExpose);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("g", {
        ref: (_value, _refs) => {
          _refs["gEl"] = _value;
          gEl.value = _value;
        },
        style: normalizeStyle({ transform: `translate3d(${dragX.value}px,${dragY.value}px,0)` }),
        "data-x": dragX.value,
        "data-y": dragY.value
      }, [
        createElementVNode("g", {
          style: normalizeStyle({ cursor: selected.value ? "move" : "pointer" }),
          onMousedown: _cache[0] || (_cache[0] = (...args) => unref(dragStart) && unref(dragStart)(...args)),
          onContextmenu: pathContextmenu,
          onDblclick: pathDblclick
        }, [
          __props.type === unref(PipePathType).pipe ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(pipeComposeData), (el) => {
            return openBlock(), createElementBlock("path", {
              key: el.stroke,
              d: unref(d),
              stroke: el.stroke,
              "stroke-linecap": "round",
              "stroke-linejoin": "round",
              style: normalizeStyle({
                "stroke-width": el.strokeWidth,
                fill: "none"
              })
            }, null, 12, _hoisted_2$5);
          }), 128)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
            createElementVNode("path", {
              d: unref(d),
              stroke: pipePathStyle.value.outerColor,
              style: normalizeStyle([{ "fill": "none" }, {
                "stroke-width": pipePathStyle.value.outerSize,
                cursor: selected.value ? "move" : "pointer",
                "stroke-opacity": pipePathStyle.value.outerOpacity / 100
              }]),
              "stroke-linecap": "round",
              "stroke-linejoin": "round"
            }, null, 12, _hoisted_3$4),
            showArrow.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(arrowData), (el, i) => {
              return openBlock(), createBlock(_sfc_main$p, {
                key: i,
                "center-x": el.x,
                "center-y": el.y,
                "init-width": arrowWidth,
                "init-height": arrowHeight,
                index: i,
                type: unref(FlowPathType).Triangle,
                "scale-factor": 1,
                fill: pipePathStyle.value.outerColor,
                rotate: el.rotate
              }, null, 8, ["center-x", "center-y", "index", "type", "fill", "rotate"]);
            }), 128)) : createCommentVNode("", true)
          ], 64)),
          createElementVNode("path", {
            d: unref(d),
            "stroke-dasharray": `${pipePathStyle.value.dottedSize},${pipePathStyle.value.dottedMargin}`,
            stroke: pipePathStyle.value.innerColor,
            style: normalizeStyle([{ "fill": "none", "pointer-events": "none" }, { "stroke-width": pipePathStyle.value.innerSize, cursor: selected.value ? "move" : "pointer" }])
          }, [
            isFloating.value ? (openBlock(), createElementBlock("animate", {
              key: 0,
              attributeType: "XML",
              attributeName: "stroke-dashoffset",
              from: "200",
              to: "0",
              dur: speedValue[speed.value],
              repeatCount: "indefinite"
            }, null, 8, _hoisted_5$2)) : createCommentVNode("", true)
          ], 12, _hoisted_4$3)
        ], 36),
        selected.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(points), (el, i) => {
            return openBlock(), createElementBlock("rect", {
              key: i,
              rx: "4",
              ry: "4",
              fill: "#4F80FF",
              x: el.x - unref(operSize) / 2,
              y: el.y - unref(operSize) / 2,
              width: unref(operSize),
              height: unref(operSize)
            }, null, 8, _hoisted_6$2);
          }), 128)),
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(points), (el, i) => {
            return openBlock(), createElementBlock("rect", {
              key: i,
              fill: "rgba(0,0,0,0)",
              x: el.x - (unref(operSize) + 10) / 2,
              y: el.y - (unref(operSize) + 10) / 2,
              width: unref(operSize) + 10,
              height: unref(operSize) + 10,
              style: { cursor: "nw-resize" },
              onMousedown: ($event) => unref(rectDragStart)($event, el, i),
              onContextmenu: ($event) => rectContextmenu($event, el, i)
            }, null, 40, _hoisted_7$2);
          }), 128))
        ], 64)) : createCommentVNode("", true),
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(textData), (el) => {
          return openBlock(), createBlock(_sfc_main$q, mergeProps({
            key: el.id
          }, unref(textHandlers).getTextPosition(el), {
            width: el.width,
            "onUpdate:width": ($event) => el.width = $event,
            height: el.height,
            "onUpdate:height": ($event) => el.height = $event,
            value: el.value,
            "onUpdate:value": ($event) => el.value = $event,
            editable: el.editable,
            "onUpdate:editable": ($event) => el.editable = $event
          }), null, 16, ["width", "onUpdate:width", "height", "onUpdate:height", "value", "onUpdate:value", "editable", "onUpdate:editable"]);
        }), 128))
      ], 12, _hoisted_1$6);
    };
  }
});
function useDeviceRotate(options) {
  let connData;
  let connectPoints;
  const { rotate, rotateStart } = useRotate({
    centerPoint() {
      return options.centerPoint.value;
    },
    getRelativeElement() {
      return options.compCommon.getSvgInfo().container;
    },
    start() {
      connData = options.compCommon.connection.getConnect(options.deviceId);
      connectPoints = options.getConnectPoints();
    },
    end() {
      connData = void 0;
      connectPoints = void 0;
    }
  });
  watch(rotate, (deg) => {
    let isReset = false;
    if (!connData || !connectPoints) {
      isReset = true;
      connData = options.compCommon.connection.getConnect(options.deviceId);
      connectPoints = options.getConnectPoints();
    }
    if (connData && connectPoints) {
      for (let i = 0; i < connData.length; i++) {
        const drag = connData[i];
        const moveOptions = {};
        if (drag.extra && drag.extra.connectPositionIndex !== void 0) {
          const connectPoint = connectPoints[drag.extra.connectPositionIndex] || connectPoints[0];
          const rotateConnectPoint = getRotatePoint(options.centerPoint.value, connectPoint, deg);
          moveOptions.x = rotateConnectPoint.x;
          moveOptions.y = rotateConnectPoint.y;
          drag.move(moveOptions);
        }
      }
      if (isReset) {
        connData = void 0;
        connectPoints = void 0;
      }
    }
  });
  return {
    rotateStart,
    rotate
  };
}
function __variableDynamicImportRuntime0__(path) {
  switch (path) {
    case "./resource/AirConditioningUnit.vue":
      return import("./AirConditioningUnit.js");
    case "./resource/AirCooledHeatPump.vue":
      return import("./AirCooledHeatPump.js");
    case "./resource/ChilledWaterPump.vue":
      return import("./ChilledWaterPump.js");
    case "./resource/ClosedWaterTank.vue":
      return import("./ClosedWaterTank.js");
    case "./resource/ColdStoragePump.vue":
      return import("./ColdStoragePump.js");
    case "./resource/ColdStorageTank.vue":
      return import("./ColdStorageTank.js");
    case "./resource/ConnectPipe.vue":
      return import("./ConnectPipe.js");
    case "./resource/CoolingTower.vue":
      return import("./CoolingTower.js");
    case "./resource/CoolingWaterPump.vue":
      return import("./CoolingWaterPump.js");
    case "./resource/DrainWaterPump.vue":
      return import("./DrainWaterPump.js");
    case "./resource/EvaporativeCooling.vue":
      return import("./EvaporativeCooling.js");
    case "./resource/HeatingHotWaterPump.vue":
      return import("./HeatingHotWaterPump.js");
    case "./resource/Meter.vue":
      return import("./Meter.js");
    case "./resource/Pipe.vue":
      return import("./Pipe.js");
    case "./resource/PressWaterSupply.vue":
      return import("./PressWaterSupply.js");
    case "./resource/RefrigerationUnit.vue":
      return import("./RefrigerationUnit.js");
    case "./resource/Valve.vue":
      return import("./Valve.js");
    case "./resource/WaterConcentrator.vue":
      return import("./WaterConcentrator.js");
    case "./resource/WaterSeparator.vue":
      return import("./WaterSeparator.js");
    case "./resource/WaterSoftener.vue":
      return import("./WaterSoftener.js");
    case "./resource/WaterTank.vue":
      return import("./WaterTank.js");
    default:
      return new Promise(function(resolve, reject) {
        (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path)));
      });
  }
}
const _hoisted_1$5 = ["data-x", "data-y", "transform", "data-component"];
const _hoisted_2$4 = ["xlink:href", "x", "y", "opacity", "width"];
const _hoisted_3$3 = ["cx", "cy"];
const _hoisted_4$2 = ["x", "y", "width", "height"];
const _hoisted_5$1 = ["x", "y", "width", "height"];
const _hoisted_6$1 = ["width", "height"];
const _hoisted_7$1 = /* @__PURE__ */ createElementVNode("use", {
  "xlink:href": "#icon-rotate",
  style: { "fill": "#333" }
}, null, -1);
const _hoisted_8$1 = [
  _hoisted_7$1
];
const _hoisted_9$1 = ["x", "y", "width", "height"];
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
  props: {
    index: null,
    id: null,
    centerX: null,
    centerY: null,
    initWidth: null,
    scaleFactor: null,
    componentName: null,
    imgSrc: null,
    imgName: null
  },
  emits: ["select"],
  setup(__props, { expose, emit: emits }) {
    const props = __props;
    let component = null;
    let factor = 1;
    let connectPosition = [];
    let type = ConfigurationType.DeviceSvg;
    if (props.componentName) {
      component = defineAsyncComponent(() => __variableDynamicImportRuntime0__(`./resource/${props.componentName}.vue`));
      factor = SvgDetail[props.componentName].factor;
      connectPosition = SvgDetail[props.componentName].connectPosition;
    } else if (props.imgSrc && props.imgName) {
      factor = ImgDetail[props.imgName].factor;
      connectPosition = ImgDetail[props.imgName].connectPosition;
      type = ConfigurationType.DeviceImage;
    }
    const MIN_SIZE = 20;
    const DEFAULT_SIZE2 = 150;
    const OPER_CURSORS = ["nw-resize", "ne-resize", "sw-resize", "se-resize"];
    const compCommon = inject(CompCommonKey);
    const { isEditor } = compCommon;
    const svgInfo = compCommon.getSvgInfo();
    const whFactor = ref(factor);
    let initWidth = props.initWidth || DEFAULT_SIZE2;
    let _width = initWidth;
    let _x = props.centerX - initWidth / 2;
    let _y = props.centerY - initWidth / whFactor.value / 2;
    initWidth = initWidth * props.scaleFactor;
    const width = ref(initWidth);
    const x = ref(props.centerX - initWidth / 2);
    const y = ref(props.centerY - initWidth / whFactor.value / 2);
    const height = computed(() => {
      return width.value / whFactor.value;
    });
    const selected = ref(false);
    const rects = computed(() => [
      {
        x: x.value - OperSize / 2,
        y: y.value - OperSize / 2
      },
      {
        x: x.value + width.value - OperSize / 2,
        y: y.value - OperSize / 2
      },
      {
        x: x.value - OperSize / 2,
        y: y.value + width.value / whFactor.value - OperSize / 2
      },
      {
        x: x.value + width.value - OperSize / 2,
        y: y.value + width.value / whFactor.value - OperSize / 2
      }
    ]);
    const centerPoint = computed(() => ({
      x: x.value + width.value / 2,
      y: y.value + width.value / whFactor.value / 2
    }));
    watch(() => props.scaleFactor, (v) => {
      x.value = _x * v;
      y.value = _y * v;
      width.value = _width * v;
    });
    function getDeviceInfo() {
      return {
        x: x.value,
        y: y.value,
        width: width.value,
        height: height.value,
        rotate: rotate.value,
        componentName: props.componentName,
        imgSrc: props.imgSrc,
        setRotate(deg) {
          rotate.value = deg;
        }
      };
    }
    const dragX = ref(0);
    const dragY = ref(0);
    function dragMove({ dx, dy }) {
      dragX.value = dx;
      dragY.value = dy;
    }
    function dragEnd() {
      x.value += dragX.value;
      y.value += dragY.value;
      _x = x.value / props.scaleFactor;
      _y = y.value / props.scaleFactor;
      dragX.value = 0;
      dragY.value = 0;
    }
    function selectDevice() {
      selected.value = true;
      compCommon.toggleSelect({
        type,
        selected: true,
        index: props.index,
        unSelect() {
          selected.value = false;
        },
        getDeviceInfo
      });
    }
    const { dragStart } = useDrag({
      unStopPropagation: !isEditor.value,
      element: svgInfo.container,
      start(_startData, e) {
        const isDragSelect = compCommon.multipleSelect.startTogether(props.id);
        if (!isDragSelect) {
          compCommon.connection.startTogether(props.id);
          selectDevice();
          emits("select", {
            e,
            type,
            id: props.id,
            componentName: props.componentName,
            imgSrc: props.imgSrc
          });
        }
        return { isDragSelect };
      },
      move({ dx, dy, startResult }) {
        if (compCommon.isEditor.value) {
          if (startResult.isDragSelect) {
            compCommon.multipleSelect.moveTogether({ dx, dy });
          } else {
            dragMove({ dx, dy });
            compCommon.connection.moveTogether(props.id, { dx, dy });
          }
        }
      },
      end({ startResult, isClick }, e) {
        if (compCommon.isEditor.value) {
          if (startResult.isDragSelect) {
            compCommon.multipleSelect.endTogether();
          } else {
            dragEnd();
            compCommon.connection.endTogether(props.id);
          }
        }
      }
    });
    const { dragStart: rectDragStart } = useDrag({
      getRelativeElement() {
        return svgInfo.container;
      },
      start() {
        return {
          width: width.value,
          height: height.value
        };
      },
      move({ dx, dy, startData, startResult }) {
        const curDragRectIndex = startData.args[0];
        if (selected.value) {
          let width1 = width.value, width2 = width1;
          if (curDragRectIndex === 0 || curDragRectIndex === 1) {
            if (rects.value[2].y - (startData.y + dy) < MIN_SIZE / whFactor.value) {
              width2 = MIN_SIZE;
            } else {
              width2 = (startResult.height - dy) * whFactor.value;
            }
          }
          if (curDragRectIndex === 0 || curDragRectIndex === 2) {
            if (rects.value[1].x - (startData.x + dx) < MIN_SIZE) {
              width1 = MIN_SIZE;
            } else {
              width1 = startResult.width - dx;
            }
          }
          if (curDragRectIndex === 1 || curDragRectIndex === 3) {
            if (startData.x + dx - rects.value[0].x < MIN_SIZE) {
              width1 = MIN_SIZE;
            } else {
              width1 = startResult.width + dx;
            }
          }
          if (curDragRectIndex === 2 || curDragRectIndex === 3) {
            if (startData.y + dy - rects.value[1].y < MIN_SIZE / whFactor.value) {
              width2 = MIN_SIZE;
            } else {
              width2 = (startResult.height + dy) * whFactor.value;
            }
          }
          const curWidth = Math.max(width1, width2);
          if (curDragRectIndex === 0) {
            x.value = rects.value[1].x + OperSize / 2 - curWidth;
            y.value = rects.value[2].y + OperSize / 2 - curWidth / whFactor.value;
          } else if (curDragRectIndex === 1) {
            y.value = rects.value[2].y + OperSize / 2 - curWidth / whFactor.value;
          } else if (curDragRectIndex === 2) {
            x.value = rects.value[1].x + OperSize / 2 - curWidth;
          }
          width.value = curWidth;
          _x = x.value / props.scaleFactor;
          _y = y.value / props.scaleFactor;
          _width = curWidth / props.scaleFactor;
          const connectPoints = getConnectPoints(true);
          compCommon.connection.moveTogether(props.id, { connectPoints });
        }
      }
    });
    function getConnectPoints(isRotate) {
      const connetPoints = [];
      connectPosition.forEach((item) => {
        const cx = x.value + width.value * item[0];
        const cy = y.value + height.value * item[1];
        const point = {
          x: cx,
          y: cy
        };
        connetPoints.push(isRotate ? getRotatePoint(centerPoint.value, point, rotate.value) : point);
      });
      return connetPoints;
    }
    function getDragInfo(connectPositionIndex) {
      return {
        id: props.id,
        type,
        move: dragMove,
        end: dragEnd,
        extra: {
          connectPositionIndex
        }
      };
    }
    const { opacity, curConnectPoint, mousemove, mouseout, mouseover, mouseup } = useConnEffect({
      getConnectPoints() {
        return getConnectPoints(true);
      },
      getDraggingRect() {
        return compCommon == null ? void 0 : compCommon.draggingPipePathRect;
      },
      setDragInfo(index2) {
        if (compCommon) {
          compCommon.connectingDevice = getDragInfo(index2);
        }
      }
    });
    onBeforeUnmount(() => {
      compCommon.connection.disConnect(props.id);
      if (selected.value) {
        compCommon.toggleSelect({
          type,
          selected: false,
          index: props.index
        });
      }
    });
    const TEXT2DEVICE = 5;
    const textPosition = ref(TextPosition.Bottom);
    const textValue = ref("");
    const textHeight = ref(0);
    const textWidth = ref(0);
    const textEditable = ref(false);
    const textX = computed(() => {
      if (textPosition.value === TextPosition.Left) {
        return x.value - TEXT2DEVICE - textWidth.value;
      } else if (textPosition.value === TextPosition.Right) {
        return x.value + width.value + TEXT2DEVICE;
      } else {
        return x.value + width.value / 2 - textWidth.value / 2;
      }
    });
    const textY = computed(() => {
      if (textPosition.value === TextPosition.Top) {
        return y.value - TEXT2DEVICE - textHeight.value;
      } else if (textPosition.value === TextPosition.Bottom) {
        return y.value + width.value / whFactor.value + TEXT2DEVICE;
      } else {
        return y.value + width.value / whFactor.value / 2 - textHeight.value / 2;
      }
    });
    function setText() {
      if (isEditor.value) {
        textEditable.value = true;
      }
    }
    const { rotateStart, rotate } = useDeviceRotate({
      compCommon,
      centerPoint,
      deviceId: props.id,
      getConnectPoints
    });
    watch([width, x, y, rotate], (v) => {
      compCommon.updatePanelInfo({
        type,
        panelInfo: {
          width: v[0],
          height: height.value,
          x: v[1],
          y: v[2],
          rotate: v[3],
          setRotate(deg) {
            rotate.value = deg;
          }
        }
      });
    });
    const deviceExpose = {
      isInBoxSelect(boxSelect) {
        const isIn = isRectIntersect({ x: x.value, y: y.value }, width.value, height.value, { x: boxSelect.x, y: boxSelect.y }, boxSelect.width, boxSelect.height);
        return isIn;
      },
      select() {
        selected.value = true;
        compCommon.toggleSelect({
          type,
          selected: true,
          index: props.index,
          unSelect() {
            selected.value = false;
          },
          multiple: true,
          id: props.id,
          drag: {
            move: dragMove,
            end: dragEnd
          },
          getDeviceInfo
        });
      },
      toJSON() {
        const json = {
          id: props.id,
          x: _x,
          y: _y,
          width: _width,
          rotate: rotate.value,
          text: textValue.value,
          textPosition: textPosition.value
        };
        if (props.imgSrc) {
          json.imgSrc = props.imgSrc;
          json.imgName = props.imgName;
        }
        if (props.componentName) {
          json.componentName = props.componentName;
        }
        return json;
      },
      setJSON(data) {
        rotate.value = data.rotate;
        textValue.value = data.text || "";
        const pos = data.textPosition;
        if (pos) {
          textPosition.value = pos;
        }
      },
      getDragInfo,
      previewCondition() {
      },
      restoreCondition() {
      },
      getOriginalProps() {
      },
      getBox() {
        return {
          x: x.value,
          y: y.value,
          width: width.value,
          height: height.value,
          maxX: x.value + width.value,
          maxY: y.value + height.value
        };
      },
      translate(dx, dy) {
        x.value = x.value + dx;
        y.value = y.value + dy;
        _x = x.value / props.scaleFactor;
        _y = y.value / props.scaleFactor;
      }
    };
    expose(deviceExpose);
    const gEl = ref();
    function contextmenu(e) {
      const arr = [
        {
          name: "\u8BBE\u7F6E\u6587\u5B57",
          handler() {
            textEditable.value = true;
          }
        },
        {
          name: "\u6587\u5B57\u4F4D\u7F6E",
          children: [
            {
              name: "\u4E0A",
              handler() {
                textPosition.value = TextPosition.Top;
              }
            },
            {
              name: "\u53F3",
              handler() {
                textPosition.value = TextPosition.Right;
              }
            },
            {
              name: "\u4E0B",
              handler() {
                textPosition.value = TextPosition.Bottom;
              }
            },
            {
              name: "\u5DE6",
              handler() {
                textPosition.value = TextPosition.Left;
              }
            }
          ]
        }
      ];
      if (compCommon.connection.isConnect(props.id)) {
        arr.push({
          name: "\u89E3\u9664\u8FDE\u63A5",
          handler() {
            compCommon.connection.disConnect(props.id);
          }
        });
      }
      compCommon.showContextmenu(e, { data: arr, id: props.id, element: gEl.value });
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("g", {
        ref: (_value, _refs) => {
          _refs["gEl"] = _value;
          gEl.value = _value;
        },
        "data-x": dragX.value,
        "data-y": dragY.value,
        transform: `translate(${dragX.value},${dragY.value}) rotate(${unref(rotate)},${unref(centerPoint).x},${unref(centerPoint).y})`,
        fill: "#f2f2f2",
        "data-component": __props.componentName
      }, [
        unref(component) ? (openBlock(), createBlock(resolveDynamicComponent(unref(component)), {
          key: 0,
          x: x.value,
          y: y.value,
          opacity: unref(opacity),
          width: width.value,
          style: normalizeStyle({ cursor: selected.value && unref(isEditor) ? "move" : "pointer" })
        }, null, 8, ["x", "y", "opacity", "width", "style"])) : __props.imgSrc ? (openBlock(), createElementBlock("image", {
          key: 1,
          "xlink:href": __props.imgSrc,
          x: x.value,
          y: y.value,
          opacity: unref(opacity),
          width: width.value,
          onMousedown: _cache[0] || (_cache[0] = (...args) => unref(dragStart) && unref(dragStart)(...args)),
          onMouseover: _cache[1] || (_cache[1] = (...args) => unref(mouseover) && unref(mouseover)(...args)),
          onMousemove: _cache[2] || (_cache[2] = (...args) => unref(mousemove) && unref(mousemove)(...args)),
          onMouseout: _cache[3] || (_cache[3] = (...args) => unref(mouseout) && unref(mouseout)(...args)),
          onMouseup: _cache[4] || (_cache[4] = (...args) => unref(mouseup) && unref(mouseup)(...args)),
          onContextmenu: contextmenu,
          onDblclick: setText
        }, null, 40, _hoisted_2$4)) : createCommentVNode("", true),
        unref(curConnectPoint) ? (openBlock(), createElementBlock("circle", {
          key: 2,
          cx: unref(curConnectPoint).x,
          cy: unref(curConnectPoint).y,
          r: "6",
          fill: "#4F80FF",
          stroke: "rgba(255,255,255,0.8)",
          "stroke-width": "2"
        }, null, 8, _hoisted_3$3)) : createCommentVNode("", true),
        selected.value ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
          createElementVNode("rect", {
            x: unref(rects)[0].x + unref(OperSize) / 2,
            y: unref(rects)[0].y + unref(OperSize) / 2,
            width: unref(rects)[1].x - unref(rects)[0].x,
            height: unref(rects)[2].y - unref(rects)[0].y,
            fill: "none",
            stroke: "#4F80FF",
            "stroke-dasharray": "3 3",
            style: normalizeStyle({ "stroke-width": unref(isEditor) ? 1 : 2 }),
            "pointer-events": "none"
          }, null, 12, _hoisted_4$2),
          unref(isEditor) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rects), (el, i) => {
              return openBlock(), createBlock(_sfc_main$r, {
                key: el.x + "" + el.y + i,
                x: el.x,
                y: el.y,
                cursor: OPER_CURSORS[i],
                onMousedown: ($event) => unref(rectDragStart)($event, i)
              }, null, 8, ["x", "y", "cursor", "onMousedown"]);
            }), 128)),
            (openBlock(), createElementBlock("foreignObject", {
              x: (unref(rects)[0].x + unref(OperSize) + unref(rects)[1].x) / 2 - unref(OperSize),
              y: unref(rects)[0].y - unref(OperSize) * 2,
              width: unref(OperSize) * 2,
              height: unref(OperSize) * 2,
              style: { "cursor": "move" },
              onMousedown: _cache[5] || (_cache[5] = (...args) => unref(rotateStart) && unref(rotateStart)(...args))
            }, [
              (openBlock(), createElementBlock("svg", {
                width: unref(OperSize) * 2,
                height: unref(OperSize) * 2
              }, _hoisted_8$1, 8, _hoisted_6$1))
            ], 40, _hoisted_5$1))
          ], 64)) : createCommentVNode("", true)
        ], 64)) : createCommentVNode("", true),
        unref(component) ? (openBlock(), createElementBlock("rect", {
          key: 4,
          x: x.value,
          y: y.value,
          width: width.value,
          height: width.value / unref(factor),
          fill: "rgba(0,0,0,0)",
          stroke: "rgba(0,0,0,0)",
          onMousedown: _cache[6] || (_cache[6] = (...args) => unref(dragStart) && unref(dragStart)(...args)),
          onMouseover: _cache[7] || (_cache[7] = (...args) => unref(mouseover) && unref(mouseover)(...args)),
          onMousemove: _cache[8] || (_cache[8] = (...args) => unref(mousemove) && unref(mousemove)(...args)),
          onMouseout: _cache[9] || (_cache[9] = (...args) => unref(mouseout) && unref(mouseout)(...args)),
          onMouseup: _cache[10] || (_cache[10] = (...args) => unref(mouseup) && unref(mouseup)(...args)),
          onContextmenu: contextmenu,
          onDblclick: setText
        }, null, 40, _hoisted_9$1)) : createCommentVNode("", true),
        createVNode(_sfc_main$q, {
          value: textValue.value,
          "onUpdate:value": _cache[11] || (_cache[11] = ($event) => textValue.value = $event),
          width: textWidth.value,
          "onUpdate:width": _cache[12] || (_cache[12] = ($event) => textWidth.value = $event),
          height: textHeight.value,
          "onUpdate:height": _cache[13] || (_cache[13] = ($event) => textHeight.value = $event),
          editable: textEditable.value,
          "onUpdate:editable": _cache[14] || (_cache[14] = ($event) => textEditable.value = $event),
          x: unref(textX),
          y: unref(textY)
        }, null, 8, ["value", "width", "height", "editable", "x", "y"])
      ], 8, _hoisted_1$5);
    };
  }
});
const _hoisted_1$4 = ["transform", "data-x", "data-y"];
const _hoisted_2$3 = ["x", "y", "width", "height"];
const _hoisted_3$2 = ["x", "y", "width", "height"];
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
  props: {
    id: null,
    centerX: null,
    centerY: null,
    labelPlaceholder: { default: "label" },
    valuePlaceholder: { default: "value" },
    initLabelX: null,
    initLabelY: null,
    index: null,
    scaleFactor: null
  },
  setup(__props, { expose }) {
    const props = __props;
    const LabelToValue = 5;
    const SelectToContent = 5;
    const ValueToUnit = 3;
    const position = ref("vertical");
    const compCommon = inject(CompCommonKey);
    const isEditor = compCommon.isEditor;
    const svgInfo = compCommon.getSvgInfo();
    function getLabelCssProps(newProps) {
      return Object.assign({ "font-size": TextFontSzie * props.scaleFactor + "px", color: LabelColor }, newProps);
    }
    function getValueCssProps(newProps) {
      return Object.assign({ "font-size": TextFontSzie * props.scaleFactor + "px", color: ValueColor }, newProps);
    }
    function getUnitCssProps(newProps) {
      return Object.assign({ "font-size": TextFontSzie * props.scaleFactor + "px", color: UnitColor }, newProps);
    }
    const labelCssProps = ref(getLabelCssProps());
    const valueCssProps = ref(getValueCssProps());
    const unitCssProps = ref(getUnitCssProps());
    const dragX = ref(0);
    const dragY = ref(0);
    const labelX = ref(0);
    const labelY = ref(0);
    const labelWidth = ref(0);
    const labelHeight = ref(0);
    const labelText = ref(props.labelPlaceholder);
    function labelBlur() {
      if (!labelText.value) {
        labelText.value = props.labelPlaceholder;
      }
    }
    let _labelX = 0;
    let _labelY = 0;
    let _labelFontSize = TextFontSzie;
    let _valueFontSize = TextFontSzie;
    let _unitFontSize = TextFontSzie;
    watch([labelX, labelY], ([v1, v2]) => {
      _labelX = v1 / props.scaleFactor;
      _labelY = v2 / props.scaleFactor;
    });
    const valueWidth = ref(0);
    const valueHeight = ref(0);
    const valueX = computed(() => {
      if (position.value === "vertical") {
        const unitSpace = hideUnit.value ? 0 : ValueToUnit + unitWidth.value;
        return labelX.value + (labelWidth.value - (valueWidth.value + unitSpace)) / 2;
      } else {
        return labelX.value + labelWidth.value + getLabelToValue();
      }
    });
    const valueY = computed(() => {
      if (position.value === "vertical") {
        return labelY.value + labelHeight.value + getLabelToValue();
      } else {
        return labelY.value;
      }
    });
    const valueText = ref(props.valuePlaceholder);
    function valueBlur() {
      if (!valueText.value) {
        valueText.value = props.valuePlaceholder;
      }
    }
    const unitWidth = ref(0);
    const unitHeight = ref(0);
    const unitText = ref("unit");
    function unitBlur() {
      if (!unitText.value) {
        unitText.value = "unit";
      }
    }
    onMounted(() => {
      if (props.centerX !== void 0 && props.centerY !== void 0) {
        if (props.centerX === 0 && props.centerY === 0)
          return;
        labelX.value = props.centerX - labelWidth.value / 2;
        labelY.value = props.centerY - labelHeight.value / 2;
      }
    });
    function dealScaleCssProps(cssProps, labelValuePart) {
      const copy = __spreadValues({}, cssProps);
      let fSize = null;
      switch (labelValuePart) {
        case LabelValuePart.Label:
          fSize = _labelFontSize;
          break;
        case LabelValuePart.Value:
          fSize = _valueFontSize;
          break;
        case LabelValuePart.Unit:
          fSize = _unitFontSize;
          break;
      }
      if (fSize) {
        copy["font-size"] = fSize;
      }
      return copy;
    }
    function select(multiple) {
      selected.value = true;
      compCommon.toggleSelect({
        type: ConfigurationType.LabelValue,
        selected: true,
        multiple,
        index: props.index,
        unSelect() {
          selected.value = false;
        },
        id: props.id,
        drag: {
          move,
          end
        },
        getLabelValueInfo() {
          return {
            labelCssProps: dealScaleCssProps(labelCssProps.value, LabelValuePart.Label),
            valueCssProps: dealScaleCssProps(valueCssProps.value, LabelValuePart.Value),
            unitCssProps: dealScaleCssProps(unitCssProps.value, LabelValuePart.Unit),
            rotate: rotate.value,
            position: position.value,
            hideValue: hideValue.value,
            hideUnit: hideUnit.value,
            hideLabel: hideLabel.value,
            dataKey: dataKey.value,
            setDataKey(val) {
              dataKey.value = val;
            },
            setRotate(val) {
              rotate.value = val;
            },
            setCssProps(cssProps, labelValuePart) {
              if (cssProps["font-size"]) {
                const newFontSize = parseInt(cssProps["font-size"]);
                cssProps["font-size"] = newFontSize * props.scaleFactor + "px";
                switch (labelValuePart) {
                  case LabelValuePart.Label:
                    _labelFontSize = newFontSize;
                    labelCssProps.value = cssProps;
                    break;
                  case LabelValuePart.Value:
                    _valueFontSize = newFontSize;
                    valueCssProps.value = cssProps;
                    break;
                  case LabelValuePart.Unit:
                    _unitFontSize = newFontSize;
                    unitCssProps.value = cssProps;
                    break;
                }
              }
            },
            setPosition(val) {
              position.value = val;
            },
            setPartHide(isHide, labelValuePart) {
              switch (labelValuePart) {
                case LabelValuePart.Label:
                  hideLabel.value = isHide;
                  break;
                case LabelValuePart.Value:
                  hideValue.value = isHide;
                  break;
                case LabelValuePart.Unit:
                  hideUnit.value = isHide;
                  break;
              }
            }
          };
        }
      });
    }
    function move({ dx, dy }) {
      dragX.value = dx;
      dragY.value = dy;
    }
    function end() {
      labelX.value += dragX.value;
      labelY.value += dragY.value;
      dragX.value = 0;
      dragY.value = 0;
    }
    const { dragStart } = useDrag({
      unStopPropagation: !isEditor.value,
      element: svgInfo.container,
      start() {
        const isDragSelect = compCommon.multipleSelect.startTogether(props.id);
        if (!isDragSelect) {
          select();
        }
        return { isDragSelect };
      },
      move({ dx, dy, startResult }) {
        if (!isEditor.value)
          return;
        if (startResult.isDragSelect) {
          compCommon.multipleSelect.moveTogether({ dx, dy });
        } else {
          move({ dx, dy });
        }
      },
      end({ isClick, startResult }) {
        if (startResult.isDragSelect) {
          compCommon.multipleSelect.endTogether();
        } else {
          end();
        }
        if (isClick) {
          select();
        }
      }
    });
    function getLabelToValue() {
      return hideLabel.value || hideValue.value ? 0 : LabelToValue;
    }
    const selected = ref(false);
    const selectX = computed(() => {
      if (position.value === "vertical" && !hideValue.value) {
        return Math.min(labelX.value, valueX.value) - SelectToContent;
      } else {
        return labelX.value - SelectToContent;
      }
    });
    const selectY = computed(() => {
      return labelY.value - SelectToContent;
    });
    const selectWidth = computed(() => {
      const unitSpace = hideUnit.value ? 0 : ValueToUnit + unitWidth.value;
      const valueUnitWidth = hideValue.value ? 0 : valueWidth.value + unitSpace;
      if (position.value === "vertical") {
        return Math.max(labelWidth.value, valueUnitWidth) + SelectToContent * 2;
      } else {
        return labelWidth.value + getLabelToValue() + valueUnitWidth + SelectToContent * 2;
      }
    });
    const selectHeight = computed(() => {
      if (position.value === "vertical") {
        return labelHeight.value + (hideValue.value ? 0 : valueHeight.value) + getLabelToValue() + SelectToContent * 2;
      } else {
        return Math.max(labelHeight.value, hideValue.value ? 0 : valueHeight.value) + SelectToContent * 2;
      }
    });
    const hideValue = ref(false);
    const hideLabel = ref(false);
    const hideBg = ref(false);
    let isTriggerHideLabelWatch = true;
    watch(hideLabel, (v) => {
      if (v && isTriggerHideLabelWatch) {
        nextTick(() => {
          labelX.value = labelX.value + labelWidth.value / 2;
          labelWidth.value = 0;
          labelHeight.value = 0;
        });
      }
    });
    const hideUnit = ref(false);
    watch(hideUnit, (v) => {
      if (v) {
        unitWidth.value = 0;
        unitHeight.value = 0;
      }
    });
    function contextmenu(e, el) {
      const arr = [
        {
          name: hideBg.value ? "\u663E\u793A\u80CC\u666F" : "\u9690\u85CF\u80CC\u666F",
          handler() {
            hideBg.value = !hideBg.value;
          }
        }
      ];
      const toggleValue = {
        name: hideValue.value ? "\u663E\u793Avalue" : "\u9690\u85CFvalue",
        handler() {
          hideValue.value = !hideValue.value;
        }
      };
      const toggleLabel = {
        name: hideLabel.value ? "\u663E\u793Alabel" : "\u9690\u85CFlabel",
        handler() {
          hideLabel.value = !hideLabel.value;
        }
      };
      const toggleUnit = {
        name: hideUnit.value ? "\u663E\u793Aunit" : "\u9690\u85CFunit",
        handler() {
          hideUnit.value = !hideUnit.value;
        }
      };
      if (!hideValue.value && !hideLabel.value) {
        arr.push(toggleLabel, toggleValue, toggleUnit);
      } else if (hideValue.value) {
        arr.push(toggleValue);
      } else if (hideLabel.value) {
        arr.push(toggleLabel, toggleUnit);
      }
      if (!hideValue.value && !hideLabel.value) {
        arr.push({
          name: position.value === "vertical" ? "\u6C34\u5E73\u6A21\u5F0F" : "\u5782\u76F4\u6A21\u5F0F",
          handler() {
            position.value = position.value === "vertical" ? "horizontal" : "vertical";
          }
        });
      }
      compCommon.showContextmenu(e, {
        data: arr,
        id: props.id,
        element: el
      });
    }
    const centerPoint = computed(() => {
      return {
        x: selectX.value + selectWidth.value / 2,
        y: selectY.value + selectHeight.value / 2
      };
    });
    const { rotate, rotateStart } = useRotate({
      getRelativeElement() {
        return compCommon.getSvgInfo().container;
      },
      centerPoint() {
        return centerPoint.value;
      }
    });
    const splitProps = computed(() => {
      if (position.value === "vertical") {
        return {
          x: labelX.value,
          y: labelY.value + labelHeight.value,
          width: Math.max(labelWidth.value, valueWidth.value),
          height: LabelToValue
        };
      } else {
        return {
          x: labelX.value + labelWidth.value,
          y: labelY.value,
          width: LabelToValue,
          height: Math.max(labelHeight.value, valueHeight.value)
        };
      }
    });
    onBeforeUnmount(() => {
      if (selected.value) {
        selected.value = false;
        compCommon.toggleSelect({
          type: ConfigurationType.LabelValue,
          selected: false,
          index: props.index
        });
      }
    });
    watch(() => props.scaleFactor, (s) => {
      labelX.value = _labelX * s;
      labelY.value = _labelY * s;
      labelCssProps.value = Object.assign({}, labelCssProps.value, { "font-size": _labelFontSize * s + "px" });
      valueCssProps.value = Object.assign({}, valueCssProps.value, { "font-size": _valueFontSize * s + "px" });
      unitCssProps.value = Object.assign({}, unitCssProps.value, { "font-size": _unitFontSize * s + "px" });
    });
    const dataKey = ref(null);
    watch([rotate, position, hideValue, hideUnit, hideLabel, dataKey], (v) => {
      compCommon.updatePanelInfo({
        type: ConfigurationType.LabelValue,
        panelInfo: {
          rotate: v[0],
          position: v[1],
          hideValue: v[2],
          hideUnit: v[3],
          hideLabel: v[4],
          dataKey: v[5]
        }
      });
    });
    const animateClass = ref("");
    let originalProps = null;
    const conditionData = ref([]);
    function getOriginalProps() {
      if (!originalProps) {
        return {
          rotate: rotate.value,
          labelCssProps: labelCssProps.value,
          valueCssProps: valueCssProps.value,
          animateClass: animateClass.value,
          unitCssProps: unitCssProps.value
        };
      }
      return originalProps;
    }
    function previewCondition(condition) {
      if (!originalProps) {
        originalProps = getOriginalProps();
      }
      condition.rotate !== void 0 && (rotate.value = condition.rotate);
      condition.labelCssProps !== void 0 && (labelCssProps.value = getLabelCssProps(condition.labelCssProps));
      condition.valueCssProps !== void 0 && (valueCssProps.value = getValueCssProps(condition.valueCssProps));
      condition.unitCssProps !== void 0 && (unitCssProps.value = getValueCssProps(condition.unitCssProps));
      condition.animateClass !== void 0 && (animateClass.value = condition.animateClass);
    }
    function restoreCondition() {
      if (originalProps) {
        rotate.value = originalProps.rotate;
        labelCssProps.value = getLabelCssProps(originalProps.labelCssProps);
        valueCssProps.value = getValueCssProps(originalProps.valueCssProps);
        unitCssProps.value = getUnitCssProps(originalProps.unitCssProps);
        animateClass.value = originalProps.animateClass;
        originalProps = null;
      }
    }
    const myExpose = {
      isInBoxSelect(boxSelect) {
        const isIn = isRectIntersect({ x: labelX.value - SelectToContent, y: labelY.value - SelectToContent }, selectWidth.value, selectHeight.value, { x: boxSelect.x, y: boxSelect.y }, boxSelect.width, boxSelect.height);
        return isIn;
      },
      select() {
        select(true);
      },
      toJSON() {
        return {
          id: props.id,
          position: position.value,
          labelText: labelText.value,
          valueText: valueText.value,
          unitText: unitText.value,
          rotate: rotate.value,
          dataKey: dataKey.value,
          labelX: _labelX,
          labelY: _labelY,
          labelCssProps: Object.assign({}, labelCssProps.value, { "font-size": _labelFontSize + "px" }),
          valueCssProps: Object.assign({}, valueCssProps.value, { "font-size": _valueFontSize + "px" }),
          unitCssProps: Object.assign({}, unitCssProps.value, { "font-size": _unitFontSize + "px" }),
          hideValue: hideValue.value,
          hideUnit: hideUnit.value,
          hideLabel: hideLabel.value,
          hideBg: hideBg.value,
          conditionData: conditionData.value
        };
      },
      setJSON(data) {
        position.value = data.position;
        labelText.value = data.labelText;
        valueText.value = isEditor.value ? data.valueText : "--";
        unitText.value = data.unitText;
        rotate.value = data.rotate;
        labelCssProps.value = data.labelCssProps;
        valueCssProps.value = data.valueCssProps;
        unitCssProps.value = data.unitCssProps;
        _labelFontSize = parseInt(data.labelCssProps["font-size"]) || TextFontSzie;
        _valueFontSize = parseInt(data.valueCssProps["font-size"]) || TextFontSzie;
        _unitFontSize = parseInt((data.unitCssProps || {})["font-size"]) || TextFontSzie;
        hideValue.value = data.hideValue || false;
        hideUnit.value = data.hideUnit || false;
        if (data.hideLabel) {
          isTriggerHideLabelWatch = false;
          labelWidth.value = 0;
          labelHeight.value = 0;
        }
        hideLabel.value = data.hideLabel || false;
        hideBg.value = data.hideBg || false;
        dataKey.value = data.dataKey;
        conditionData.value = data.conditionData;
        labelX.value = data.labelX;
        labelY.value = data.labelY;
        nextTick(() => {
          isTriggerHideLabelWatch = true;
        });
      },
      handleData(data) {
        if (dataKey.value) {
          const value = data[dataKey.value];
          if (value !== void 0) {
            valueText.value = value;
          }
        }
        restoreCondition();
        const applyCondition = getApplyCondition(conditionData.value, data);
        if (applyCondition.length > 0) {
          applyCondition.forEach((el) => {
            previewCondition(el);
          });
        }
      },
      getConditionData() {
        return conditionData.value;
      },
      getDataKey() {
        return dataKey.value;
      },
      setConditionData(data) {
        conditionData.value = data;
      },
      previewCondition,
      restoreCondition,
      getDisplayInfo() {
        return {
          name: labelText.value
        };
      },
      getOriginalProps,
      getBox() {
        return {
          x: labelX.value - SelectToContent,
          y: labelY.value - SelectToContent,
          width: selectWidth.value,
          height: selectHeight.value,
          maxX: labelX.value - SelectToContent + selectWidth.value,
          maxY: labelY.value - SelectToContent + selectHeight.value
        };
      },
      translate(dx, dy) {
        labelX.value = labelX.value + dx;
        labelY.value = labelY.value + dy;
      }
    };
    expose(myExpose);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("g", {
        class: normalizeClass(animateClass.value),
        transform: `translate(${dragX.value},${dragY.value}) rotate(${unref(rotate)},${unref(centerPoint).x},${unref(centerPoint).y})`,
        "data-x": dragX.value,
        "data-y": dragY.value,
        onMousedown: _cache[9] || (_cache[9] = (...args) => unref(dragStart) && unref(dragStart)(...args)),
        onContextmenu: _cache[10] || (_cache[10] = ($event) => contextmenu($event, _ctx.$el))
      }, [
        !hideBg.value ? (openBlock(), createElementBlock("rect", {
          key: 0,
          x: unref(selectX),
          y: unref(selectY),
          rx: "16",
          ry: "16",
          width: unref(selectWidth),
          height: unref(selectHeight),
          fill: "#F3F5F7",
          stroke: "#F3F5F7",
          style: { "stroke-width": 1 },
          "pointer-events": "none"
        }, null, 8, _hoisted_2$3)) : createCommentVNode("", true),
        !hideLabel.value ? (openBlock(), createBlock(_sfc_main$q, {
          key: 1,
          value: labelText.value,
          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => labelText.value = $event),
          width: labelWidth.value,
          "onUpdate:width": _cache[1] || (_cache[1] = ($event) => labelWidth.value = $event),
          height: labelHeight.value,
          "onUpdate:height": _cache[2] || (_cache[2] = ($event) => labelHeight.value = $event),
          "readonly-text-class": "vc-select-none " + (unref(isEditor) ? "vc-cursor-move" : "vc-cursor-pointer"),
          "text-css-props": labelCssProps.value,
          "stop-propagation": false,
          x: labelX.value,
          y: labelY.value,
          readonly: !unref(isEditor),
          onBlur: labelBlur
        }, null, 8, ["value", "width", "height", "readonly-text-class", "text-css-props", "x", "y", "readonly"])) : createCommentVNode("", true),
        !hideValue.value && !hideLabel.value ? (openBlock(), createElementBlock("rect", mergeProps({ key: 2 }, unref(splitProps), { fill: "rgba(0,0,0,0)" }), null, 16)) : createCommentVNode("", true),
        !hideValue.value ? (openBlock(), createBlock(_sfc_main$q, {
          key: 3,
          value: valueText.value,
          "onUpdate:value": _cache[3] || (_cache[3] = ($event) => valueText.value = $event),
          width: valueWidth.value,
          "onUpdate:width": _cache[4] || (_cache[4] = ($event) => valueWidth.value = $event),
          height: valueHeight.value,
          "onUpdate:height": _cache[5] || (_cache[5] = ($event) => valueHeight.value = $event),
          "readonly-text-class": "vc-select-none " + (unref(isEditor) ? "vc-cursor-move" : "vc-cursor-pointer"),
          "text-css-props": valueCssProps.value,
          "stop-propagation": false,
          x: unref(valueX),
          y: unref(valueY),
          readonly: true,
          onBlur: valueBlur
        }, null, 8, ["value", "width", "height", "readonly-text-class", "text-css-props", "x", "y"])) : createCommentVNode("", true),
        !hideValue.value && !hideUnit.value ? (openBlock(), createBlock(_sfc_main$q, {
          key: 4,
          value: unitText.value,
          "onUpdate:value": _cache[6] || (_cache[6] = ($event) => unitText.value = $event),
          width: unitWidth.value,
          "onUpdate:width": _cache[7] || (_cache[7] = ($event) => unitWidth.value = $event),
          height: unitHeight.value,
          "onUpdate:height": _cache[8] || (_cache[8] = ($event) => unitHeight.value = $event),
          "readonly-text-class": "vc-select-none " + (unref(isEditor) ? "vc-cursor-move" : "vc-cursor-pointer"),
          "text-css-props": unitCssProps.value,
          "stop-propagation": false,
          x: unref(valueX) + ValueToUnit + valueWidth.value,
          y: unref(valueY) + (valueHeight.value - unitHeight.value) / 2,
          onBlur: unitBlur
        }, null, 8, ["value", "width", "height", "readonly-text-class", "text-css-props", "x", "y"])) : createCommentVNode("", true),
        selected.value ? (openBlock(), createElementBlock(Fragment, { key: 5 }, [
          createElementVNode("rect", {
            x: unref(selectX),
            y: unref(selectY),
            width: unref(selectWidth),
            height: unref(selectHeight),
            fill: "none",
            stroke: "#4F80FF",
            "stroke-dasharray": "3 3",
            style: normalizeStyle({ "stroke-width": unref(isEditor) ? 1 : 2 }),
            "pointer-events": "none"
          }, null, 12, _hoisted_3$2),
          unref(isEditor) ? (openBlock(), createBlock(_sfc_main$s, {
            key: 0,
            x: unref(selectX) + unref(selectWidth) / 2 - unref(IconSize) / 2,
            y: labelY.value - SelectToContent - unref(IconSize),
            size: unref(IconSize),
            onMousedown: unref(rotateStart)
          }, null, 8, ["x", "y", "size", "onMousedown"])) : createCommentVNode("", true)
        ], 64)) : createCommentVNode("", true)
      ], 42, _hoisted_1$4);
    };
  }
});
const _hoisted_1$3 = ["height", "width", "viewBox"];
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
  props: {
    boxSelect: null
  },
  setup(__props, { expose }) {
    const {
      deviceSvgData,
      deviceImageData,
      pipePathData,
      labelValueData,
      compInstance,
      scaleFactor: scaleFactor2,
      svgWidth,
      svgHeight,
      flowPathData,
      previewScale,
      previewScaleChange,
      selectItem
    } = inject(RootCommonKey);
    const { initSvgInfo, isEditor } = inject(CompCommonKey);
    const svgEl = shallowRef();
    const boxSelectEl = shallowRef(null);
    const gridLineIns = shallowRef(null);
    let resizeObserver;
    let containerWidth = 0;
    let containerHeight = 0;
    onMounted(() => {
      if (svgEl.value) {
        initSvgInfo({
          svgEl: svgEl.value,
          boxSelectEl: boxSelectEl.value,
          gridLineIns: gridLineIns.value
        });
        if (!isEditor.value) {
          position.value = "absolute";
          const containerEl = svgEl.value.parentNode;
          resizeObserver = new index((entries) => {
            const entry = entries[0];
            if (entry) {
              containerWidth = entry.contentRect.width;
              containerHeight = entry.contentRect.height;
              handleResize(entry.contentRect.width, entry.contentRect.height);
            }
          });
          resizeObserver.observe(containerEl);
          if (isMobile) {
            containerEl.addEventListener("touchstart", beforeDragStart);
          } else {
            containerEl.addEventListener("mousedown", beforeDragStart);
          }
        }
      }
    });
    onBeforeUnmount(() => {
      if (resizeObserver) {
        console.log("=======>ResizeObserver unmount");
        resizeObserver.disconnect();
        resizeObserver = null;
      }
      if (svgEl.value && !isEditor.value) {
        const containerEl = svgEl.value.parentNode;
        if (isMobile) {
          containerEl.removeEventListener("touchstart", beforeDragStart);
        } else {
          containerEl.removeEventListener("mousedown", beforeDragStart);
        }
      }
    });
    const position = ref("static");
    const left = ref(0);
    const top = ref(0);
    function handleResize(containerWidth2, containerHeight2) {
      let newWidth = containerHeight2 * svgWHFactor;
      if (newWidth > containerWidth2) {
        svgHeight.value = containerWidth2 / svgWHFactor;
        svgWidth.value = containerWidth2;
      } else {
        svgHeight.value = containerHeight2;
        svgWidth.value = newWidth;
      }
      left.value = (containerWidth2 - svgWidth.value) / 2;
      top.value = (containerHeight2 - svgHeight.value) / 2;
    }
    const previewSpace = 30;
    let svgWHFactor = 1;
    const viewPortWidth = ref(0);
    const viewPortHeight = ref(0);
    const myExpose = {
      initViewBox() {
        if (isEditor.value)
          return;
        let minX = null;
        let minY = null;
        let maxX = null;
        let maxY = null;
        for (const i in compInstance) {
          const ins = compInstance[i];
          const box = ins.getBox();
          if (minX === null || box.x < minX) {
            minX = box.x;
          }
          if (minY === null || box.y < minY) {
            minY = box.y;
          }
          if (maxX === null || box.maxX > maxX) {
            maxX = box.maxX;
          }
          if (maxY === null || box.maxY > maxY) {
            maxY = box.maxY;
          }
        }
        if (!minX)
          minX = 0;
        if (!minY)
          minY = 0;
        if (!maxX)
          maxX = svgWidth.value;
        if (!maxY)
          maxY = svgHeight.value;
        let dx = 0;
        let dy = 0;
        if (minX > previewSpace || minY > previewSpace) {
          dx = minX > previewSpace ? -(minX - previewSpace) : 0;
          dy = minY > previewSpace ? -(minY - previewSpace) : 0;
          for (const i in compInstance) {
            compInstance[i].translate(dx, dy);
          }
        }
        maxX += dx;
        maxY += dy;
        if (maxX + previewSpace < svgWidth.value) {
          svgWidth.value = maxX + previewSpace;
        }
        if (maxY + previewSpace < svgHeight.value) {
          svgHeight.value = maxY + previewSpace;
        }
        svgWHFactor = svgWidth.value / svgHeight.value;
        viewPortWidth.value = svgWidth.value;
        viewPortHeight.value = svgHeight.value;
      }
    };
    expose(myExpose);
    function beforeDragStart(e) {
      dragStart(e);
      if (isMobile) {
        document.addEventListener("touchmove", dragMove, { passive: false });
        document.addEventListener("touchend", beforeDragEnd);
        document.addEventListener("touchcancel", dragCancel);
      } else {
        document.addEventListener("mousemove", dragMove);
        document.addEventListener("mouseup", beforeDragEnd);
      }
    }
    function beforeDragEnd() {
      dragEnd();
      if (isMobile) {
        document.removeEventListener("touchmove", dragMove);
        document.removeEventListener("touchend", beforeDragEnd);
        document.removeEventListener("touchcancel", dragCancel);
      } else {
        document.removeEventListener("mousemove", dragMove);
        document.removeEventListener("mouseup", beforeDragEnd);
      }
    }
    let startData = null;
    function handleEvent(e) {
      let result;
      if (e instanceof MouseEvent) {
        result = {
          x: e.pageX,
          y: e.pageY,
          x1: 0,
          y1: 0,
          isDoubleFinger: false
        };
      } else {
        const changedTouches = e.changedTouches;
        result = {
          x: changedTouches[0].pageX,
          y: changedTouches[0].pageY,
          x1: changedTouches[1] ? changedTouches[1].pageX : 0,
          y1: changedTouches[1] ? changedTouches[1].pageY : 0,
          isDoubleFinger: changedTouches.length > 1
        };
      }
      return result;
    }
    function getBounding() {
      const curSvgWidth = svgWidth.value * previewScale.value;
      const curSvgHeight = svgHeight.value * previewScale.value;
      let minLeft, maxLeft, minTop, maxTop;
      if (curSvgWidth > containerWidth) {
        minLeft = containerWidth - curSvgWidth;
        maxLeft = 0;
      } else {
        minLeft = 0;
        maxLeft = containerWidth - curSvgWidth;
      }
      if (curSvgHeight > containerHeight) {
        minTop = containerHeight - curSvgHeight;
        maxTop = 0;
      } else {
        minTop = 0;
        maxTop = containerHeight - curSvgHeight;
      }
      return {
        minLeft,
        maxLeft,
        minTop,
        maxTop
      };
    }
    function handleLeftTop(newLeft, newTop, bounding) {
      if (newLeft < bounding.minLeft) {
        newLeft = bounding.minLeft;
      }
      if (newLeft > bounding.maxLeft) {
        newLeft = bounding.maxLeft;
      }
      if (newTop < bounding.minTop) {
        newTop = bounding.minTop;
      }
      if (newTop > bounding.maxTop) {
        newTop = bounding.maxTop;
      }
      return {
        left: newLeft,
        top: newTop
      };
    }
    function getLeftTopAfterOriginalScale(curScale) {
      if (startScaleData) {
        const { left: left2, top: top2, scale, originalPoint } = startScaleData;
        const x = originalPoint.x / (scale * svgWidth.value) * (curScale * svgWidth.value);
        const y = originalPoint.y / (scale * svgHeight.value) * (curScale * svgHeight.value);
        const newLeft = left2 - (x - originalPoint.x);
        const newTop = top2 - (y - originalPoint.y);
        return {
          left: newLeft,
          top: newTop
        };
      }
      return null;
    }
    function dragLog(...arg) {
      if (window.Logger) {
        window.Logger.log.apply(window.Logger, arg);
      }
    }
    function dragStart(e) {
      const info = handleEvent(e);
      const bounding = getBounding();
      startData = Object.assign({
        x: info.x,
        y: info.y,
        left: left.value,
        top: top.value,
        bodyWidth: document.body.offsetWidth
      }, bounding);
    }
    function getScale(scale) {
      if (!scale)
        scale = 1;
      if (scale > 5) {
        scale = 5;
      } else if (scale < 1) {
        scale = 1;
      }
      return scale;
    }
    let startScaleData = null;
    previewScaleChange.value = () => {
      startScaleData = null;
    };
    let lastLeft = null;
    let lastTop = null;
    function dragMove(e) {
      if (startData) {
        e.preventDefault();
        e.stopPropagation();
        const info = handleEvent(e);
        if (info.isDoubleFinger) {
          const distance = calc2pointDistance({ x: info.x, y: info.y }, { x: info.x1, y: info.y1 });
          if (startScaleData) {
            const d = distance - startScaleData.distance;
            let scale = startScaleData.scale + d / startData.bodyWidth;
            dragLog("doubleFinger dragMove");
            previewScale.value = getScale(scale);
          } else {
            dragLog("init doubleFinger");
            if (svgEl.value) {
              const rect = svgEl.value.getBoundingClientRect();
              const centerPoint = { x: (info.x + info.x1) / 2, y: (info.x + info.y1) / 2 };
              startScaleData = {
                distance,
                scale: previewScale.value,
                left: left.value,
                top: top.value,
                originalPoint: { x: centerPoint.x - rect.x, y: centerPoint.y - rect.y }
              };
            }
          }
          return;
        } else {
          if (startScaleData) {
            dragLog("doubleFinger back to singleFinger");
            const bounding = getBounding();
            startData = Object.assign({
              x: info.x,
              y: info.y,
              left: left.value,
              top: top.value,
              bodyWidth: document.body.offsetWidth
            }, bounding);
            startScaleData = null;
            return;
          }
        }
        const dx = info.x - startData.x;
        const dy = info.y - startData.y;
        let newLeft = startData.left + dx;
        let newTop = startData.top + dy;
        const re = handleLeftTop(newLeft, newTop, startData);
        if (lastLeft !== null && lastTop !== null) {
          const lastDx = Math.abs(re.left - lastLeft);
          const lastDy = Math.abs(re.top - lastTop);
          if (lastDx > 150 || lastDy > 150) {
            dragLog(lastDx.toFixed(2), lastDy.toFixed(2), "last dxy is too big, ignore");
            return;
          }
        }
        left.value = re.left;
        top.value = re.top;
        lastLeft = re.left;
        lastTop = re.top;
        dragLog("singleFinger dragMove");
      }
    }
    function dragEnd() {
      dragLog("dragEnd");
      handlerEnd();
    }
    function dragCancel() {
      dragLog("dragCancel");
      handlerEnd();
    }
    function handlerEnd() {
      lastLeft = null;
      lastTop = null;
      startScaleData = null;
    }
    watch(previewScale, (v1, v2) => {
      let shouldReset = false;
      if (!startScaleData) {
        shouldReset = true;
        startScaleData = {
          left: left.value,
          top: top.value,
          originalPoint: {
            x: svgWidth.value * v2 / 2,
            y: svgHeight.value * v2 / 2
          },
          scale: v2,
          distance: 0
        };
      }
      const re = getLeftTopAfterOriginalScale(v1);
      if (re) {
        const bounding = getBounding();
        const handleRe = handleLeftTop(re.left, re.top, bounding);
        left.value = handleRe.left;
        top.value = handleRe.top;
      }
      if (shouldReset) {
        startScaleData = null;
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("svg", {
        ref: (_value, _refs) => {
          _refs["svgEl"] = _value;
          isRef(svgEl) && (svgEl.value = _value);
        },
        "data-configuration": "1",
        class: "vc-bg-white vc-shadow",
        xmlns: "http://www.w3.org/2000/svg",
        version: "1.1",
        height: unref(svgHeight) * unref(previewScale),
        width: unref(svgWidth) * unref(previewScale),
        viewBox: viewPortWidth.value === 0 || viewPortHeight.value === 0 ? void 0 : `0 0 ${viewPortWidth.value} ${viewPortHeight.value}`,
        style: normalizeStyle({
          position: position.value,
          left: 0,
          top: 0,
          transform: `translate3d(${left.value}px, ${top.value}px, 0) scale(1, 1)`,
          transformOrigin: "0 0"
        })
      }, [
        unref(isEditor) ? (openBlock(), createBlock(_sfc_main$7, {
          key: 0,
          ref: (_value, _refs) => {
            _refs["gridLineIns"] = _value;
            isRef(gridLineIns) && (gridLineIns.value = _value);
          },
          width: unref(svgWidth),
          height: unref(svgHeight),
          shares: unref(GridShares)
        }, null, 8, ["width", "height", "shares"])) : createCommentVNode("", true),
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pipePathData), (el, i) => {
          return openBlock(), createBlock(_sfc_main$6, {
            id: el.id,
            key: el.id,
            ref: (ref2) => {
              unref(compInstance)[el.id] = ref2;
            },
            index: i,
            "center-x": el.centerX,
            "center-y": el.centerY,
            colors: el.colors,
            "scale-factor": unref(scaleFactor2),
            type: el.pipePathType
          }, null, 8, ["id", "index", "center-x", "center-y", "colors", "scale-factor", "type"]);
        }), 128)),
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(deviceImageData), (el, i) => {
          return openBlock(), createBlock(_sfc_main$5, {
            id: el.id,
            key: el.id,
            ref: (ref2) => {
              unref(compInstance)[el.id] = ref2;
            },
            "img-src": el.imgSrc,
            "img-name": el.imgName,
            "init-width": el.initWidth || 0,
            index: i,
            "center-x": el.centerX,
            "center-y": el.centerY,
            "scale-factor": unref(scaleFactor2),
            onSelect: unref(selectItem)
          }, null, 8, ["id", "img-src", "img-name", "init-width", "index", "center-x", "center-y", "scale-factor", "onSelect"]);
        }), 128)),
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(deviceSvgData), (el, i) => {
          return openBlock(), createBlock(_sfc_main$5, {
            id: el.id,
            key: el.id,
            ref: (ref2) => {
              unref(compInstance)[el.id] = ref2;
            },
            "component-name": el.componentName,
            "init-width": el.initWidth || 0,
            index: i,
            "center-x": el.centerX,
            "center-y": el.centerY,
            "scale-factor": unref(scaleFactor2),
            onSelect: unref(selectItem)
          }, null, 8, ["id", "component-name", "init-width", "index", "center-x", "center-y", "scale-factor", "onSelect"]);
        }), 128)),
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(labelValueData), (el, i) => {
          return openBlock(), createBlock(_sfc_main$4, mergeProps({
            ref: (ref2) => {
              unref(compInstance)[el.id] = ref2;
            },
            key: el.id
          }, el, {
            index: i,
            "scale-factor": unref(scaleFactor2)
          }), null, 16, ["index", "scale-factor"]);
        }), 128)),
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(flowPathData), (el, i) => {
          return openBlock(), createBlock(_sfc_main$p, {
            id: el.id,
            key: el.id,
            ref: (ref2) => {
              unref(compInstance)[el.id] = ref2;
            },
            "init-width": el.initWidth,
            "init-height": el.initHeight,
            "center-x": el.centerX,
            "center-y": el.centerY,
            "scale-factor": unref(scaleFactor2),
            type: el.flowPathType,
            index: i
          }, null, 8, ["id", "init-width", "init-height", "center-x", "center-y", "scale-factor", "type", "index"]);
        }), 128)),
        __props.boxSelect ? (openBlock(), createElementBlock("rect", mergeProps({
          key: 1,
          ref: (_value, _refs) => {
            _refs["boxSelectEl"] = _value;
            isRef(boxSelectEl) && (boxSelectEl.value = _value);
          }
        }, __props.boxSelect, {
          fill: "#99ccff",
          "fill-opacity": "0.3",
          stroke: "#0000dd",
          "stroke-width": "0.3"
        }), null, 16)) : createCommentVNode("", true)
      ], 12, _hoisted_1$3);
    };
  }
});
const _hoisted_1$2 = { class: "vc-text-xl md:vc-text-2xl vc-text-gray-600 vc-select-none vc-bg-white vc-shadow-lg vc-px-2 vc-py-1 vc-rounded" };
const _hoisted_2$2 = { class: "vc-text-lg vc-inline-block vc-text-center vc-w-20" };
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  props: {
    modelValue: null,
    zoomHandler: null,
    step: { default: 0.1 },
    min: { default: 0.3 },
    max: { default: 10 }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { emit: emits }) {
    const props = __props;
    function zoomIn() {
      let value = props.modelValue * 100;
      if (props.zoomHandler) {
        value = props.zoomHandler(true, value);
      } else {
        value = value + props.step * (value >= 100 ? 2 : 1) * 100;
      }
      value = value / 100;
      if (value > props.max) {
        value = props.max;
      }
      emits("change", value);
      emits("update:modelValue", value);
    }
    function zoomOut() {
      let value = props.modelValue * 100;
      if (props.zoomHandler) {
        value = props.zoomHandler(false, value);
      } else {
        value = value - props.step * (value > 100 ? 2 : 1) * 100;
      }
      value = value / 100;
      if (value < props.min) {
        value = props.min;
      }
      emits("change", value);
      emits("update:modelValue", value);
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$2, [
        createVNode(_sfc_main$v, {
          name: "zoom-in",
          class: "vc-cursor-pointer active:vc-text-blue-600",
          onClick: withModifiers(zoomIn, ["stop"])
        }, null, 8, ["onClick"]),
        createElementVNode("span", _hoisted_2$2, toDisplayString(Math.round(__props.modelValue * 100) + "%"), 1),
        createVNode(_sfc_main$v, {
          name: "zoom-out",
          class: "vc-cursor-pointer",
          onClick: withModifiers(zoomOut, ["stop"])
        }, null, 8, ["onClick"])
      ]);
    };
  }
});
function tryOnScopeDispose(fn) {
  if (getCurrentScope()) {
    onScopeDispose(fn);
    return true;
  }
  return false;
}
var _a;
const isClient = typeof window !== "undefined";
const isString = (val) => typeof val === "string";
const noop = () => {
};
isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
function unrefElement(elRef) {
  var _a2;
  const plain = unref(elRef);
  return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
}
const defaultWindow = isClient ? window : void 0;
isClient ? window.document : void 0;
isClient ? window.navigator : void 0;
isClient ? window.location : void 0;
function useEventListener(...args) {
  let target;
  let event;
  let listener;
  let options;
  if (isString(args[0])) {
    [event, listener, options] = args;
    target = defaultWindow;
  } else {
    [target, event, listener, options] = args;
  }
  if (!target)
    return noop;
  let cleanup = noop;
  const stopWatch = watch(() => unrefElement(target), (el) => {
    cleanup();
    if (!el)
      return;
    el.addEventListener(event, listener, options);
    cleanup = () => {
      el.removeEventListener(event, listener, options);
      cleanup = noop;
    };
  }, { immediate: true, flush: "post" });
  const stop = () => {
    stopWatch();
    cleanup();
  };
  tryOnScopeDispose(stop);
  return stop;
}
const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
const globalKey = "__vueuse_ssr_handlers__";
_global[globalKey] = _global[globalKey] || {};
_global[globalKey];
const DefaultMagicKeysAliasMap = {
  ctrl: "control",
  command: "meta",
  cmd: "meta",
  option: "alt",
  up: "arrowup",
  down: "arrowdown",
  left: "arrowleft",
  right: "arrowright"
};
function useMagicKeys(options = {}) {
  const {
    reactive: useReactive = false,
    target = defaultWindow,
    aliasMap = DefaultMagicKeysAliasMap,
    passive = true,
    onEventFired = noop
  } = options;
  const current = reactive(new Set());
  const obj = { toJSON() {
    return {};
  }, current };
  const refs = useReactive ? reactive(obj) : obj;
  const metaDeps = new Set();
  function setRefs(key, value) {
    if (key in refs) {
      if (useReactive)
        refs[key] = value;
      else
        refs[key].value = value;
    }
  }
  function updateRefs(e, value) {
    var _a2, _b;
    const key = (_a2 = e.key) == null ? void 0 : _a2.toLowerCase();
    const code = (_b = e.code) == null ? void 0 : _b.toLowerCase();
    const values = [code, key].filter(Boolean);
    if (code) {
      if (value)
        current.add(e.code);
      else
        current.delete(e.code);
    }
    for (const key2 of values)
      setRefs(key2, value);
    if (key === "meta" && !value) {
      metaDeps.forEach((key2) => {
        current.delete(key2);
        setRefs(key2, false);
      });
      metaDeps.clear();
    } else if (e.getModifierState("Meta") && value) {
      [...current, ...values].forEach((key2) => metaDeps.add(key2));
    }
  }
  if (target) {
    useEventListener(target, "keydown", (e) => {
      updateRefs(e, true);
      return onEventFired(e);
    }, { passive });
    useEventListener(target, "keyup", (e) => {
      updateRefs(e, false);
      return onEventFired(e);
    }, { passive });
  }
  const proxy = new Proxy(refs, {
    get(target2, prop, rec) {
      if (typeof prop !== "string")
        return Reflect.get(target2, prop, rec);
      prop = prop.toLowerCase();
      if (prop in aliasMap)
        prop = aliasMap[prop];
      if (!(prop in refs)) {
        if (/[+_-]/.test(prop)) {
          const keys2 = prop.split(/[+_-]/g).map((i) => i.trim());
          refs[prop] = computed(() => keys2.every((key) => unref(proxy[key])));
        } else {
          refs[prop] = ref(false);
        }
      }
      const r = Reflect.get(target2, prop, rec);
      return useReactive ? unref(r) : r;
    }
  });
  return proxy;
}
var SwipeDirection;
(function(SwipeDirection2) {
  SwipeDirection2["UP"] = "UP";
  SwipeDirection2["RIGHT"] = "RIGHT";
  SwipeDirection2["DOWN"] = "DOWN";
  SwipeDirection2["LEFT"] = "LEFT";
  SwipeDirection2["NONE"] = "NONE";
})(SwipeDirection || (SwipeDirection = {}));
const _hoisted_1$1 = { class: "vc-h-full vc-overflow-auto" };
const _hoisted_2$1 = { class: "vc-border-l vc-border-gray-300 vc-w-60 vc-bg-white vc-flex vc-flex-col" };
const _hoisted_3$1 = { class: "vc-flex vc-flex-row vc-items-stretch vc-border-b vc-border-solid vc-border-gray-200 vc-text-center" };
const _hoisted_4$1 = { class: "vc-flex-1 vc-overflow-auto" };
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  props: {
    showContextmenu: null,
    compData: null,
    isEditor: { type: Boolean }
  },
  emits: ["load"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const isEditor = ref(props.isEditor);
    watch(() => props.isEditor, (v) => {
      isEditor.value = v;
    });
    const {
      deviceSvgData,
      deviceImageData,
      pipePathData,
      labelValueData,
      compInstance,
      connection,
      scaleFactor: scaleFactor2,
      pipePathLegendData,
      deviceImageLegendData,
      deviceSvgLegendData,
      flowPathData,
      flowPathLegendData
    } = inject(RootCommonKey);
    function legendGragover(e) {
      e.preventDefault();
    }
    function legendDrop(e) {
      if (e.dataTransfer) {
        const type = e.dataTransfer.getData("type");
        const i = +e.dataTransfer.getData("index");
        if (type === ConfigurationType.PipePath) {
          addPath(e, i);
        } else if (type === ConfigurationType.DeviceImage) {
          addImg(e, i);
        } else if (type === ConfigurationType.DeviceSvg) {
          addSvg(e, i);
        } else if (type === ConfigurationType.LabelValue) {
          addLabelValue(e);
        } else if (type === ConfigurationType.FlowPath) {
          addFlowPath(e, i);
        }
      }
    }
    function addPath(e, i) {
      const target = pipePathLegendData.value[i];
      pipePathData.value.push({
        id: buildShortUUID(ConfigurationType.PipePath),
        centerX: e.offsetX,
        centerY: e.offsetY,
        colors: target.colors,
        pipePathType: target.type
      });
    }
    function addImg(e, i) {
      deviceImageData.value.push({
        id: buildShortUUID(ConfigurationType.DeviceImage),
        centerX: e.offsetX,
        centerY: e.offsetY,
        imgSrc: deviceImageLegendData.value[i].src,
        imgName: deviceImageLegendData.value[i].name
      });
    }
    function addSvg(e, i) {
      deviceSvgData.value.push({
        id: buildShortUUID(ConfigurationType.DeviceSvg),
        centerX: e.offsetX,
        centerY: e.offsetY,
        componentName: deviceSvgLegendData.value[i].name,
        initWidth: deviceSvgLegendData.value[i].width
      });
    }
    function addLabelValue(e) {
      labelValueData.value.push({
        id: buildShortUUID(ConfigurationType.LabelValue),
        centerX: e.offsetX,
        centerY: e.offsetY
      });
    }
    function addFlowPath(e, i) {
      flowPathData.value.push({
        id: buildShortUUID(ConfigurationType.FlowPath),
        centerX: e.offsetX,
        centerY: e.offsetY,
        initWidth: FlowPathLegendSize.width * 2,
        initHeight: FlowPathLegendSize.height * 2,
        flowPathType: flowPathLegendData.value[i].type
      });
    }
    function deleteCompItem(id) {
      let data;
      if (id.startsWith(ConfigurationType.DeviceImage)) {
        data = deviceImageData.value;
      } else if (id.startsWith(ConfigurationType.DeviceSvg)) {
        data = deviceSvgData.value;
      } else if (id.startsWith(ConfigurationType.LabelValue)) {
        data = labelValueData.value;
      } else if (id.startsWith(ConfigurationType.PipePath)) {
        data = pipePathData.value;
      } else {
        data = flowPathData.value;
      }
      const index2 = data.findIndex((el) => el.id === id);
      if (index2 !== -1) {
        data.splice(index2, 1);
      }
    }
    const svgEl = shallowRef(null);
    const boxSelectEl = shallowRef(null);
    const gridLineIns = shallowRef(null);
    const initSvgInfo = (e) => {
      svgEl.value = e.svgEl;
      boxSelectEl.value = e.boxSelectEl;
      gridLineIns.value = e.gridLineIns;
    };
    function getSvgInfo() {
      if (svgEl.value) {
        const rect = svgEl.value.getBoundingClientRect();
        return {
          width: rect.width,
          height: rect.height,
          element: svgEl.value,
          container: svgEl.value.parentNode
        };
      } else {
        console.error("svg element is not init");
      }
    }
    function toTop(el) {
      if (svgEl.value && boxSelectEl.value) {
        svgEl.value.insertBefore(el, boxSelectEl.value);
      }
    }
    function toBottom(el) {
      if (gridLineIns.value) {
        insterAfter(el, gridLineIns.value.getEl());
      }
    }
    const { toggleSelect, startSelect, boxSelect, multipleSelect, curSelectData } = useSelect({
      connection,
      compInstance,
      onMousedown() {
        props.showContextmenu(null);
      },
      getSvgInfo,
      isEditor
    });
    const showContextmenu = (e, { data, id, element }) => {
      if (!data) {
        data = [];
      }
      if (id && element) {
        if (data.length > 0) {
          data.push({ split: true });
        }
        data = data.concat([
          {
            name: "\u5220\u9664",
            handler() {
              deleteCompItem(id);
            }
          },
          {
            name: "\u7F6E\u9876",
            handler() {
              toTop(element);
            }
          },
          {
            name: "\u7F6E\u5E95",
            handler() {
              toBottom(element);
            }
          }
        ]);
      }
      if (data.length === 0)
        return;
      e.preventDefault();
      e.stopPropagation();
      props.showContextmenu(e, data);
    };
    const updatePanelOptions = ref();
    function updatePanelInfo(options) {
      updatePanelOptions.value = options;
    }
    const conditionalPanelEl = ref(null);
    const curIndex = ref(0);
    watch(curIndex, (v) => {
      var _a2;
      if (v === 1) {
        (_a2 = conditionalPanelEl.value) == null ? void 0 : _a2.refresh();
      }
    });
    provide(CompCommonKey, {
      getSvgInfo,
      connection,
      deleteCompItem,
      showContextmenu,
      toggleSelect,
      multipleSelect,
      updatePanelInfo,
      isEditor,
      toTop,
      initSvgInfo
    });
    if (isEditor.value) {
      const keys2 = useMagicKeys();
      const ctrlC = keys2["Ctrl+C"];
      watch(ctrlC, (v) => {
        if (v && curSelectData.length === 1) {
          const item = curSelectData[0];
          if (item.type === ConfigurationType.LabelValue) {
            const ins = compInstance[item.id];
            if (ins) {
              const json = ins.toJSON();
              const newId = buildShortUUID(ConfigurationType.LabelValue);
              labelValueData.value.push({
                id: newId,
                centerX: 0,
                centerY: 0
              });
              nextTick(() => {
                const ins2 = compInstance[newId];
                if (ins2) {
                  json.labelX -= 20;
                  json.labelY -= 20;
                  ins2.setJSON(json);
                }
              });
            }
          }
        }
      });
    }
    async function loadCompData() {
      var _a2;
      if (props.compData) {
        const { importData } = useData();
        await importData(props.compData);
        emits("load");
        (_a2 = mainSvgIns.value) == null ? void 0 : _a2.initViewBox();
      }
    }
    const mainSvgIns = ref();
    onMounted(() => {
      watch(() => props.compData, loadCompData, {
        immediate: true
      });
    });
    return (_ctx, _cache) => {
      return isEditor.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
        createElementVNode("div", {
          class: "vc-relative vc-flex-1 vc-h-full vc-overflow-hidden",
          onDragover: legendGragover,
          onDrop: legendDrop
        }, [
          createElementVNode("div", _hoisted_1$1, [
            createVNode(_sfc_main$3, {
              "box-select": unref(boxSelect),
              onMousedown: unref(startSelect)
            }, null, 8, ["box-select", "onMousedown"])
          ]),
          createVNode(_sfc_main$2, {
            modelValue: unref(scaleFactor2),
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(scaleFactor2) ? scaleFactor2.value = $event : null),
            class: "vc-absolute vc-left-2 vc-bottom-6"
          }, null, 8, ["modelValue"])
        ], 32),
        createElementVNode("div", _hoisted_2$1, [
          createElementVNode("div", _hoisted_3$1, [
            createElementVNode("div", {
              class: normalizeClass(["vc-flex-1 vc-py-4 vc-border-r vc-border-solid vc-border-gray-200 vc-cursor-pointer hover:vc-bg-gray-100", { "!vc-bg-blue-500 vc-text-white": curIndex.value === 0 }]),
              onClick: _cache[1] || (_cache[1] = ($event) => curIndex.value = 0)
            }, " \u5C5E\u6027\u9762\u677F ", 2),
            createElementVNode("div", {
              class: normalizeClass(["vc-flex-1 vc-py-4 vc-cursor-pointer hover:vc-bg-gray-100", { "!vc-bg-blue-500 vc-text-white": curIndex.value === 1 }]),
              onClick: _cache[2] || (_cache[2] = ($event) => curIndex.value = 1)
            }, " \u6761\u4EF6\u9762\u677F ", 2)
          ]),
          createElementVNode("div", _hoisted_4$1, [
            withDirectives(createVNode(_sfc_main$e, {
              "cur-select-data": unref(curSelectData),
              "update-panel-options": updatePanelOptions.value
            }, null, 8, ["cur-select-data", "update-panel-options"]), [
              [vShow, curIndex.value === 0]
            ]),
            withDirectives(createVNode(_sfc_main$8, {
              ref: (_value, _refs) => {
                _refs["conditionalPanelEl"] = _value;
                conditionalPanelEl.value = _value;
              },
              "cur-select-data": unref(curSelectData)
            }, null, 8, ["cur-select-data"]), [
              [vShow, curIndex.value === 1]
            ])
          ])
        ])
      ], 64)) : (openBlock(), createBlock(_sfc_main$3, {
        key: 1,
        ref: (_value, _refs) => {
          _refs["mainSvgIns"] = _value;
          mainSvgIns.value = _value;
        }
      }, null, 512));
    };
  }
});
const _hoisted_1 = ["id"];
const _hoisted_2 = { class: "vc-flex-1 vc-overflow-hidden" };
const _hoisted_3 = { class: "vc-h-full vc-flex vc-flex-row" };
const _hoisted_4 = ["onClick", "onMouseenter", "onMouseleave"];
const _hoisted_5 = {
  key: 0,
  class: "vc-h-px vc-my-2 vc-bg-gray-300"
};
const _hoisted_6 = {
  key: 1,
  class: "hover:vc-bg-blue-500 hover:vc-text-white vc-cursor-pointer vc-flex vc-flex-row vc-items-center vc-px-3 vc-py-2"
};
const _hoisted_7 = { class: "vc-flex-1" };
const _hoisted_8 = {
  key: 2,
  class: "vc-absolute vc-top-0 vc-left-full vc--ml-2 vc-border vc-border-gray-400 vc-shadow-md vc-z-1050 vc-bg-white vc-rounded-md"
};
const _hoisted_9 = ["onClick"];
const _hoisted_10 = { class: "vc-absolute vc-inset-0 vc-z-40" };
const _hoisted_11 = { class: "vc-absolute vc--translate-x-1/2 vc--translate-y-1/2 vc-left-1/2 vc-top-1/2 vc-bg-white vc-rounded-md" };
const _hoisted_12 = { class: "vc-font-semibold vc-text-xl vc-mt-2 vc-text-center" };
const _hoisted_13 = { class: "vc-p-2 vc-border-b vc-border-gray-300" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  props: {
    mode: { default: ConfigurationMode.Apply },
    compData: null,
    data: null
  },
  emits: ["loadCompData", "select"],
  setup(__props, { expose, emit: emits }) {
    const props = __props;
    const isEditor = ref(props.mode === ConfigurationMode.Editor);
    const ConfigurationId = buildShortUUID("Configuration");
    function handleData(data) {
      if (data && !isEditor.value) {
        for (const id in compInstance) {
          const ins = compInstance[id];
          if (ins.handleData) {
            ins.handleData(data);
          }
        }
      }
    }
    function onMainLoadCompData() {
      handleData(props.data);
      emits("loadCompData");
    }
    watch(() => props.data, (data) => {
      handleData(data);
    });
    const contextmenuData = ref(null);
    const contextmenuLeft = ref();
    const contextmenuTop = ref();
    function clickContextmenuItem(el) {
      if (el.handler) {
        el.handler();
        contextmenuData.value = null;
      }
    }
    function showContextmenu(e, data) {
      if (e === null) {
        contextmenuData.value = null;
        return;
      }
      contextmenuLeft.value = e.pageX + "px";
      contextmenuTop.value = e.pageY + "px";
      contextmenuData.value = data || [];
    }
    const svgDetailSize = ref(400);
    const svgDetailVisible = ref(false);
    const curDeviceSvgName = ref("");
    const svgDetailData = reactive({
      w: 1,
      h: 1,
      x: 0,
      y: 0
    });
    function showSvgDetail(el) {
      curDeviceSvg.value = el.comp;
      curDeviceSvgName.value = el.name;
      svgDetailVisible.value = true;
    }
    const curDeviceSvg = shallowRef(null);
    function clickSvgDetail(e) {
      const el = document.getElementById("svgDetail");
      Object.assign(svgDetailData, {
        w: el == null ? void 0 : el.offsetWidth,
        h: el == null ? void 0 : el.offsetHeight,
        x: e.offsetX,
        y: e.offsetY
      });
    }
    const connection = useConnection();
    const scaleFactor2 = ref(1);
    const svgWidth = ref(SvgWidth);
    const svgHeight = ref(SvgHeight);
    watch(scaleFactor2, (v) => {
      svgWidth.value = SvgWidth * v;
      svgHeight.value = SvgHeight * v;
    });
    const pipePathData = ref([]);
    const deviceImageData = ref([]);
    const deviceSvgData = ref([]);
    const labelValueData = ref([]);
    const flowPathData = ref([]);
    const compInstance = {};
    const pipePathLegendData = shallowRef([]);
    const deviceImageLegendData = shallowRef([]);
    const deviceSvgLegendData = shallowRef([]);
    const flowPathLegendData = ref([]);
    const previewScale = ref(1);
    const previewScaleChange = shallowRef(() => {
    });
    provide(RootCommonKey, {
      cid: ConfigurationId,
      deviceSvgData,
      deviceImageData,
      pipePathData,
      labelValueData,
      flowPathData,
      compInstance,
      connection,
      scaleFactor: scaleFactor2,
      svgWidth,
      svgHeight,
      pipePathLegendData,
      deviceImageLegendData,
      deviceSvgLegendData,
      flowPathLegendData,
      previewScale,
      previewScaleChange,
      selectItem(e) {
        emits("select", e);
      }
    });
    const myExpose = {
      getCompConditionInfo() {
        const info = {};
        for (const id in compInstance) {
          const ins = compInstance[id];
          if (ins.getConditionData && ins.getDisplayInfo) {
            const data = ins.getConditionData();
            if (data.length > 0) {
              info[ins.getDisplayInfo().name] = data;
            }
          }
        }
        return info;
      },
      getLabelValueKeys() {
        const keys2 = [];
        for (const id in compInstance) {
          const ins = compInstance[id];
          if (ins.getDataKey) {
            const key = ins.getDataKey();
            key && keys2.push(key);
          }
        }
        return keys2;
      }
    };
    expose(myExpose);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        id: unref(ConfigurationId),
        class: normalizeClass(["vc-leading-none vc-h-full vc-w-full vc-relative vc-overflow-hidden", [isEditor.value ? "vc-flex vc-flex-col" : ""]])
      }, [
        isEditor.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
          createVNode(_sfc_main$t),
          createElementVNode("div", _hoisted_2, [
            createElementVNode("div", _hoisted_3, [
              createVNode(_sfc_main$o, { "show-svg-detail": showSvgDetail }),
              createVNode(_sfc_main$1, {
                "show-contextmenu": showContextmenu,
                "is-editor": true,
                "comp-data": __props.compData,
                onLoad: onMainLoadCompData
              }, null, 8, ["comp-data"])
            ])
          ]),
          contextmenuData.value ? (openBlock(), createElementBlock("div", {
            key: 0,
            class: "vc-absolute vc-border vc-border-gray-400 vc-shadow-md vc-z-1050 vc-bg-white vc-rounded-md vc-overflow-visible",
            style: normalizeStyle({ left: contextmenuLeft.value, top: contextmenuTop.value })
          }, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(contextmenuData.value, (el) => {
              return openBlock(), createElementBlock("div", {
                key: el.name,
                class: normalizeClass(["vc-relative", { "vc-z-10": el.children }]),
                onClick: ($event) => clickContextmenuItem(el),
                onMouseenter: ($event) => el.showSubMenu = true,
                onMouseleave: ($event) => el.showSubMenu = false
              }, [
                el.split ? (openBlock(), createElementBlock("div", _hoisted_5)) : (openBlock(), createElementBlock("div", _hoisted_6, [
                  createElementVNode("div", _hoisted_7, toDisplayString(el.name), 1),
                  el.children ? (openBlock(), createBlock(_sfc_main$v, {
                    key: 0,
                    name: "arrow-right"
                  })) : createCommentVNode("", true)
                ])),
                el.children && el.showSubMenu ? (openBlock(), createElementBlock("div", _hoisted_8, [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(el.children, (item) => {
                    return openBlock(), createElementBlock("div", {
                      key: item.name,
                      class: "vc-px-3 vc-py-2 hover:vc-bg-blue-500 hover:vc-text-white vc-cursor-pointer vc-whitespace-nowrap",
                      onClick: ($event) => clickContextmenuItem(item)
                    }, toDisplayString(item.name), 9, _hoisted_9);
                  }), 128))
                ])) : createCommentVNode("", true)
              ], 42, _hoisted_4);
            }), 128))
          ], 4)) : createCommentVNode("", true),
          withDirectives(createElementVNode("div", _hoisted_10, [
            createElementVNode("div", {
              class: "vc-absolute vc-inset-0 vc-bg-black vc-bg-opacity-20",
              onClick: _cache[0] || (_cache[0] = ($event) => svgDetailVisible.value = false)
            }),
            createElementVNode("div", _hoisted_11, [
              createElementVNode("h2", _hoisted_12, toDisplayString(curDeviceSvgName.value), 1),
              createElementVNode("div", _hoisted_13, " w:" + toDisplayString(unref(svgDetailData).w) + " h:" + toDisplayString(unref(svgDetailData).h) + " x:" + toDisplayString(unref(svgDetailData).x) + " y:" + toDisplayString(unref(svgDetailData).y) + " x%:" + toDisplayString((unref(svgDetailData).x / unref(svgDetailData).w).toFixed(2)) + " y%:" + toDisplayString((unref(svgDetailData).y / unref(svgDetailData).h).toFixed(2)), 1),
              createElementVNode("div", {
                id: "svgDetail",
                class: "vc-relative",
                style: normalizeStyle({ width: svgDetailSize.value + "px" }),
                onClick: clickSvgDetail
              }, [
                unref(curDeviceSvg) ? (openBlock(), createBlock(resolveDynamicComponent(unref(curDeviceSvg)), {
                  key: 0,
                  width: svgDetailSize.value
                }, null, 8, ["width"])) : createCommentVNode("", true)
              ], 4)
            ])
          ], 512), [
            [vShow, svgDetailVisible.value]
          ])
        ], 64)) : (openBlock(), createBlock(_sfc_main$1, {
          key: 1,
          "show-contextmenu": showContextmenu,
          "is-editor": isEditor.value,
          "comp-data": __props.compData,
          onLoad: onMainLoadCompData
        }, null, 8, ["is-editor", "comp-data"])),
        !isEditor.value ? (openBlock(), createBlock(_sfc_main$2, {
          key: 2,
          modelValue: previewScale.value,
          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => previewScale.value = $event),
          class: "vc-absolute vc-top-2 vc-right-2",
          onChange: unref(previewScaleChange)
        }, null, 8, ["modelValue", "onChange"])) : createCommentVNode("", true)
      ], 10, _hoisted_1);
    };
  }
});
_sfc_main.install = function(app) {
  app.component("VueConfigure", _sfc_main);
};
export { ConfigurationMode, ConfigurationType, _sfc_main as default };
